Vue面试题汇总（持续更新中）

Vue面试题汇总

• 请解释MVVM的概念及其与MVC的区别。
• 请详细阐述MVVM框架在实际开发中的应用场景。
• 简述Vue框架的主要优势有哪些？
• 在Vue框架中，请详细说明组件间如何进行数据交互的机制。
• 请列举并解释Vue框架中的主要数据绑定方法。
• 在JavaScript中如何判断变量的数据类型？列举几种常用方法并举例说明。
• Vue中的父组件和子组件之间是如何进行生命周期管理的？
• 请描述DOM渲染在整个开发流程中的具体作用和位置。
• 在JavaScript中，请详细说明Object.defineProperty()函数的使用场景和常见参数设置。
• 简述你所了解的几种Vue指令及其应用场景。
• Vue loader的作用是什么？它通常用于解决哪些技术难题？
• 在Vue路由系统中，请详细说明Hash模式和History模式的工作原理及其适用场景。
• 请比较Angular、React和Vue这三大前端框架的主要区别与特点。
• Vue Router有哪些核心功能模块？它们如何协同工作以实现复杂的路由需求？
• 在Vue框架中，请详细描述生命周期钩子（like）的作用及常见使用场景。
• 请解释为什么Vue会选择异步渲染机制？
• 在开发过程中，请分享你认为最有效的Vue性能优化策略。
• 请详细说明Webpack的基本安装流程及主要配置选项设置方法。
• 在Vue组件开发中，请描述父组件与子组件之间生命周期管理的具体流程及注意事项。
• Vue中的虚拟DOM有什么独特之处？它在优化渲染效率方面起到了什么作用？
• 如何通过捕获组件错误信息来提升应用稳定性？
  |

1.什么是MVVM？

MVVM是Model-View-ViewModel这一概念的缩写形式。可以说MVVM是一种设计范式或架构模式。其中Model层主要负责数据模型的设计与管理，并在其中定义相关数据操作与业务逻辑；在View部分则专注于将数据以直观的形式呈现于用户界面；而ViewModel的作用相当于这两部分之间的桥梁或纽带，在其工作流程中起到协调作用。

在MVVM架构中，View与Model之间并无直接关联，并非通过ViewModel实现交互。相反地，在这种架构模式下，Model与ViewModel之间的互动具有双向性。这种设计使得当View发生数据显示变化时能够即时同步至Model中，并且当Model中的数据发生变化时也会相应地影响到View的状态更新。

ViewModel借助双向绑定机制实现了对View层与Model层的有效连接。两者的同步操作无需人工干预，在此过程中开发人员能够专注于核心业务逻辑而不必操心事务处理细节。由于系统层面已经实现了对数据状态变化的有效监控与响应 MVVM负责整合并管理着复杂的事务处理权责分明地确保了应用运行的稳定性和可靠性

2.MVVM和MVC区别？它和其他框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实差别不大...都属于一种设计思想...主要就是mvc中的Controller从本质上发展出mvvm中的viewModel...mvvm通过优化了大量DOM操作进而降低了页面渲染性能、加快了加载速度，并最终影响用户体验

区别：基于数据驱动的方式，在这种模式下，应用会以数据呈现视图层而非节点操作。场景：涉及较多数据处理的场景中，该方法更为高效。

3.vue的优点是什么？

保持低耦合性。视图（View）能够独立于Model的变化和修改。每个ViewModel都可以与多个不同的'View'关联起来。当一个特定的View发生变化时, 其绑定的ViewModel不会受到影响。相应地, 在 Model 发生变更时, 相关联的 View 也不会随之改变。

可复用性。开发者可以将其封装至一个ViewModel中，并使多个view能够复用这一段视图代码。

独立化开发。开发人员可专责核心功能及数据处理工作（ViewModel），设计人员可负责界面设计。

可评估。界面历来较为复杂难以处理，在当前环境下可以通过针对ViewModel的方式实现更加简便的测试

4.组件之间的传值？

1.父组件与子组件传值
在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值
在子组件通过props:{“自定义属性名”}来接收数据
子组件传给父组件
在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
在子组件的方法通过this.emit(‘自定义事件名’)来调用这个方法 2.非父子组件间的数据传递，兄弟组件传值 创建一个空的vue实例bus 通过bus.emit(‘事件名’)传到空的vue实例中
通过bus.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

5.JS中判断数据类型的方法有几种?

最常见的判断方法：typeof

判断已知对象类型的方法： instanceof

根据对象的constructor判断： constructor

无敌万能的方法：jquery.type()

6.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

位于router目录中的index.js文件中, 将其path属性配置为:/id. 并通过:\ router.object.params.id获取路径信息

获取：this.$route.params.id

7.active-class是哪个组件的属性？

该组件中的active-class属性属于vue-router模块，并用于实现选中样式的变化。

8.嵌套路由怎么定义？

在 VueRouter 参数设置中将 children 选项配置为特定值时，则能够成功地实现了复杂的路由结构。

9.什么是生命周期

Vue 实例的创建至销毁流程即为其生命周期。具体而言，在此过程中首先初始化实例并加载初始数据；随后进行编译模板；接着完成DOM绑定并进入渲染阶段；在每次更新时会执行渲染操作；最后完成销毁操作以释放资源。

10.Vue的生命周期

在数据观测和初始化事件未开始时，在VUE实例中挂载的元素 el 和所使用的数据对象均处于未定义状态（undefined）。 此阶段可触发的唯一事件为加loading事件（loading event）。 当完成数据观测后，在属性与方法运算以及初始化事件完成后（init event），el 属性尚未呈现具体内容。
此时可触发结束loading事件，并为后续请求数据做好准备。
在挂载过程开始前调用此钩子函数（beforeMount hook function），执行相关渲染函数以启动初始配置流程。
具体而言，在此阶段会执行以下操作：编译模板文件以生成对应的HTML代码，并将这些代码替换到 el 属性指向的DOM节点中进行显示。 值得注意的是，在此过程中尚未实际将HTML内容应用到页面上（DOM hasn't been populated yet）。 尽管 el 和data都已经初始化为虚拟DOM节点（virtual DOM nodes），但它们还未连接到实际的HTML内容。
钩子函数完成后会返回一个布尔值：true表示成功挂载到实例中去。
一旦VUE实例被挂载并成功完成配置（data.filter 已经成功渲染出相应的HTML），就可以在此阶段触发相关依赖于DOM的操作。
在此过程中需特别注意不要在此期间频繁更改状态信息（state information），否则可能会导致无限循环问题出现。
服务器端渲染场景下该钩子函数不会被调用。
当钩子函数在组件生命周期中的不同阶段被调用时，请确保其执行时机与组件生命周期管理机制相吻合

11.vue生命周期的作用是什么？

它的生命周期阶段包含多种事件触发点，在管理整个Vue实例的行为流程时有助于构建合理的系统架构。

12.第一次页面加载会触发哪几个钩子？

会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

13.DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

14. Vue实现数据双向绑定的原理：Object.defineProperty（）

在Vue框架中实现数据双向绑定主要采用通过劫持机制结合发布者-订阅者模式的方式来处理。具体而言，在实现过程中我们主要使用Object.defineProperty方法来劫持各个属性的setter和getter功能。每当这些属性发生变更时会向注册的监听器发送消息从而触发相应的回调函数响应。值得注意的是在实际操作中开发者通常不会直接配置这些内部的setter和getter而是会在开发过程中将其隐藏起来以便于提升代码的安全性和用户体验。这种机制不仅能够确保数据的一致性还能够在前后端之间建立高效的通信渠道从而达到预期的数据同步效果

实现过程

我们已有能力达成数据双向绑定的目标。
为了实现这一目标，
我们需要先对数据进行 intercepting 监控，
为此，
首先需要配置一个统一管理组件 Observer 来处理所有属性的变化。
由于这些属性可能有多个，
因此，
我们将会有多个订阅者参与其中。
为了整合所有订阅者的功能，
我们需要建立一个消息订阅层 Dep，
它能够协调并管理各个组件之间的交互关系。
值得注意的是，
节点元素上可能包含一些特定指令，
因此，
我们还需要设计一个指令解析模块 Compile。
这个模块会对每个节点元素的所有指令进行遍历并解析，
并将其转化为对应的一个统一响应机制 Watcher。
每当子项发生变化时，
相应的响应机制 Watcher 就会触发相应的更新逻辑函数，
从而确保视图内容能够及时同步更新。

整理上面的思路，我们需要实现三个步骤，来完成双向绑定：

实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
     
    2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
     
    3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器
    
    
      
      
      
      
      
      
    
    代码解读

Vue中的双向数据绑定机制主要基于MVVM模式，并整合了Observer、Compile以及Watcher三个组件。该系统通过引入Observer组件来实时监测模型的数据变化情况；随后利用Compile组件解析并处理编译模板指令（例如Vue中的{{}}占位符），从而建立起Observer与Compile之间的通信机制。最终实现了数据变化引发视图更新的效果；同时，在视图层的交互变化（如输入事件）也会反向触发模型数据的更新与变更，从而形成了完整的双向绑定效果。

js实现简单的双向绑定

    <body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
    </div>
    </body>
    <script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

15.说出几种vue当中的指令和它的用法？

通过循环组件迭代数据；
绑定响应特定事件的组件实例；
实现双向数据联动关系；
渲染显示文本内容；
渲染HTML元素及其相关文本内容；
执行条件判断操作；
控制组件可见性状态；
绑定响应属性变化的组件实例。

16.vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模块。

17.为什么使用key?

借助key这一机制来为每个节点赋予一个独特的标识符后, Diff算法能够准确地识别出该节点.

18.请说出vue.cli项目中src目录每个文件夹和文件的用法？

静态资源通常存储于assets文件夹中；
组件通常放置于components目录下；
路由配置一般包含路径规划和访问权限设置；
app.vue常作为应用程序的主入口组件存在；
main.js通常用于程序启动时执行逻辑初始化。

19.分别简述computed和watch的使用场景

computed:
当一个属性受到其他多个属性的影响时就需要用到computed。
最典型的例子：结算购物车内的商品时。
watch:
当一条数据被迫影响多条数据时就需要使用watch。
例子：
比如搜索时的数据。

20.$nextTick有什么作用？

当您尝试在 DOM 元素上实时更新数据时，在直接获取该DOM元素的内容时无法立即捕获到最新的数据内容。为了实现这一点，请确保您能够调用 nextTick回调函数，在完成对新数据渲染至DOM中的操作后及时执行后续步骤以确保后续操作能够正常进行。

当数据发生动态变化时，在dom还未及时更新的情况下，存在一个问题。使用nexttick就能实现获取到数据更新后的最新dom状态。

nextTick是在下次DOM更新循环结束后触发延迟回调，在对数据进行修改后调用nextTick，则能够在回调过程中访问到最新的DOM状态

当DOM更新循环完成时触发延迟回调。当数据发生变更后立刻调用该方法以返回更新后的DOM。

当修改数据之后立即需要对DOM进行操作时，由于nextTick的作用机制，在此期间获取到的DOM会停留在数据刷新之前的状态上。这种情况下就无法满足后续操作的需求了；此时就需要使用到nextTick这一机制来解决这个问题

21.vue组件中data为什么必须是一个函数？

由于JavaScript的特性，在component中,data必须被定义为函数形式

由于单个组件是可以被共享的，并且它们的数据却是私有的原因，在实际操作中必须确保每个组件都能返回一个新的数据对象以保证唯一性

22.渐进式框架的理解

主张尽可能简单；可以根据具体需求设置相应的层级结构。
简而言之，在Vue或React中，默认的架构模式就体现了这一核心理念。
核心部分在于实现视图层的动态渲染。
组件化开发则是在其基础上进行扩展。
随后添加状态管理功能。
而整个架构的最后一环则是构建工具的配置与管理。

23.单页面应用和多页面应用区别及优缺点

单页面应用（SPA）
指只有一个主页面的应用，在浏览器初次加载时会加载所有的HTML、JavaScript 和 CSS 文件，并整合到这个主页面中。在实际开发中，则是将各个独立的 HTML 页面分开编写，在交互过程中由路由程序动态加载相应的片段，在单页面跳转时整页内容会进行刷新更新。
组成：由一个外壳和多个页面片段构成
单页面的优点：

1. 提供良好的用户体验且快速响应；内容变更无需重新加载整个界面；由于这一点减少了服务器负担
2. 实现前后端分离；3. 页面效果更加炫目
   单页面的缺点：
3. 不利于搜索引擎优化工作；2. 导航功能不可用；3. 初始加载耗时较长；4. 页面复杂度显著提升
   多页面开发的优缺点：
   优点：实现跨页跳转后用户能够清晰了解网站整体架构；各网页分布不会过于拥挤；实现较为简单且开发成本较低；适用于具备较高搜索引擎支持度及较低跳转频率的项目开发
   缺点：跨页跳转需重新执行相关的 CSS 和 JavaScript 文件导致响应较慢；需采用多种跨页通信手段才能完成片段间的切换；实现跨屏动画效果较为复杂；维护成本较高

24.Vue的路由实现：hash模式 和 history模式

哈希模式是指在网页开发中使用HTML标签时所使用的标识符命名方法，在HTML语言中使用标签名加上下划线_作为标识符的前缀，在CSS语言中则采用前缀*的方式实现类似的标识符命名功能；该命名方式具有以下特点：其一，在网页开发过程中未被包含到HTTP客户端的请求数据流中；其二，在网页开发者进行操作时会通过此方式来指导浏览器执行相应的操作；其三，在网页开发完成后此方式不会影响到服务器端的安全性；此外，在网页加载过程中该方式不会导致页面重载现象的发生；
采用此命名方式的一方仅会在生成最终URL时包含该字段及其之后的所有字段信息；例如，在一个典型的网页地址 URL 中仅包含路径部分的信息即为 http://www.xxx.com ，因此对于后端服务器来说即使没有实现完全覆盖所有的路由路径也不会返回 404 未找到页面错误信息；

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

25.Vue与Angular以及React的区别？

与Angular.js的区别

与React的区别
相同点：
1、React采用特别的JSX语法，Vue.js在组件开发中推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
2、中心思想相同：一切都是组件，组件实例之间可以嵌套。
3、都提供合理的钩子函数，可以让开发者定制化地去处理需求。
4、都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
5、在组件开发中都支持mixins的特性。
不同点：
React 依赖Virtual DOM，而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

26.vuex是什么？怎么使用？哪种功能场景使用它？

vuex是一种专为Vue.js应用程序设计的状态管理系统，在集中式架构下统一管理所有组件的状态，并遵循相应的规则确保状态的变化具有可预测性

解决的问题：
通过vue-router技术实现组件作为页面使用。每个组件仅管理自身状态（data），当其创建或进入路由启动后会被初始化。当切换至其他组件页面时，默认会销毁当前页面以释放资源，并伴随地数据随之消失。

页面之间必然会产生各种所需的共享变量。仅凭router.param或router.meta进行传递显然是无法满足需求的，在多数情况下，默认仅靠全局存储也无法满足需求。

存在这样的问题：Vue无法自动维护这些共享变量。对于组件来说，这些共享变量位于组件作用域之外，在Vue框架下，默认情况下组件也不会自动维护它们。这违反了JS编程规范或风格指南中关于全局变量的基本原则：全局变量是剧毒的存在，并具有较高的副作用。

当我们关联到不同的自定义组件内时，在尝试修改这些窗口内的变量时会发现一个问题就是那些以对象形式嵌入的不同自定义组件在某些情况下如果它们内部的某个属性发生变化就不会触发自动刷新相关属性也会停止更新这种现象并非总是会出现当我们在网页中使用较为简单的布局时一切运行都很正常但是一旦网页中的元素数量增加交互操作变得更为复杂这种异常现象就会频繁出现

Vuex主要用于处理页面间共享变量的创建、维护和更新问题。

它有以下几个核心部分组成：

1. 存储状态：用于存储数据；
2. 更新操作：处理数据更新的任务；
3. 执行更新操作时会修改存储状态的数据；
4. 获取器：用于预处理存储状态的数据；
5. 模块划分：将存储状态分割为独立的部分

在main.js引入store，注入。新建一个目录store，…… export 。

涉及单页应用中的组件间状态。
包括音乐播放、登录状态及其加入购物车。
main.js:

    import store from './store'
    
    new Vue({
    	el:'#app',
    	store
    })
    
    
      
      
      
      
      
      
    
    代码解读

27.不用Vuex会带来什么问题？

1. 维护数据变得复杂程度有所降低；想修改数据需要同时维护三个地方；
2. 一个组件内的数据难以看出具体来源；
3. 增加了系统的整体耦合度，
4. 这将导致系统整体耦合度显著提升，
5. 本意是通过组件化来降低系统的整体耦合度，
6. 现在这种做法与组件化的初衷背道而驰。

28.<keep-alive> </keep-alive>的作用是什么?

在封装动态组件时

29.Vue中引入组件的步骤?

遵循ES6中的import … from …语法或CommonJS的require()方法来进行组件导入。

对组件进行注册操作,代码如下

      // 注册
    
     Vue.component('my-component', {
    
       template: '<div>A custom component!</div>'
    
     })
    
    
      
      
      
      
      
      
      
    
    代码解读

3）使用组件<my-component> </my-component>

30.scss是什么？安装使用的步骤是？有哪几大特性？

预处理 CSS 以优化当前功能，并创建 CSS 变量用于层次结构。 安装 css-loader、node-loader 和 sass-loader 等加载器模块后，在 webpack-base.config.js 中增加一个拓展：extensibility，并添加相应的模块配置到 module 选项中。

31.mint-ui是什么？怎么使用？说出至少三个组件使用方法？

该前端组件库基于Vue框架设计。安装完成后，请将CSS样式表文件与JavaScript代码合并至同一个目录下，并通过npm命令完成安装。使用Vue Router中的Mint UI框架进行全局导入。
在单个Vue组件中导入Toast提示框时，请从‘mint-ui’模块中导入Toast组件。
第一个组件采用Toast提示框展示‘登录成功’信息。
第二个组件使用的是Mint UI框架提供的Header元素。
第三个组件则集成了一个Mint UI框架支持的滑动条功能。

32.vue-router是什么？它有哪些组件？

vue用来写路由一个插件。router-link、router-view

33.聊聊你对Vue.js的template编译的理解？

     简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
    
    
      
    
    代码解读

详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 抽象语法树 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

34.vue.js的两个核心是什么？

数据驱动：以数据驱动方式开发的应用架构中包含ViewModel这一核心组件体元，在此架构下实现各层业务功能的同时充分保证了前后端界面信息的一致性和完整性。
组件系统： 组件系统的概念模型中将应用类UI主要由组件树构成，在这种设计思想下实现了界面元素之间的动态关联关系。

35.常用事件的修饰符？

1. 阻止事件向上传播：@event.stop
2. 阻止默认自然执行的行为：@event.prevent
3. 被捕获时触发：@event.capture
4. 当发生时，在该元素自身触发回调：@event.self
5. 仅执行一次：@once

请阐述自定义指令所承载的意义是什么？并列举一个带有参数的自定义指令的具体实现方式，并详细描述其工作流程。

    Vue.directive('自定义指令名', {
      inserted: function (当前节点) {
        // 对节点的操作
       }
    })
    
    
      
      
      
      
      
    
    代码解读

    directives:{
      color:{
    bind:function(el,binding){
      if(binding.arg){
        el.style.color=binding.arg
      }else{
        el.style.color='red'
      }
    }
      }
    }
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

37.自定义指令有哪些钩子函数，及自定义指令的使用场景？

bind用于执行一次绑定操作
当插入到父节点时触发
更新组件虚拟节点时触发
当所有子虚拟节点完成更新后调用
unbind用于与指定元素断开绑定关系

38.组件特性及好处？

核心特性包括：代码复用能力、接口定制化能力、跨平台兼容性以及模块高度内聚；这些特性使得组件能够灵活扩展现有HTML结构，并提供便捷的代码复用机制。

39.什么是过滤器？怎么定义全局和局部过滤器？

过滤器 是一种用于对即将呈现的数据进行额外筛选操作的机制，在完成筛选后会将结果展示出来。值得注意的是，并非所有的原始数据都会被更改，在此过程中只会生成新的处理后的数据集。此外这种机制能够有效提升数据展示的质量

    vue.filter(‘过滤器名’,funciton(val){
     //逻辑代码
    })
    
    
      
      
      
    
    代码解读

局部：

    filter：{过滤器名:funciton(参数){
     //逻辑代码
      }
    }
    
    
      
      
      
      
    
    代码解读

40.请说下封装 vue 组件的过程？

在项目开发中，组件能够显著提高效率。它通过将页面分解为若干相对独立的功能模块来解决传统项目开发中的效率低下、难以维护以及缺乏复用性的痛点。具体而言，在实现过程中需要遵循以下步骤：首先通过Vue.extend API构建组件；随后通过Vue.component注册组件。其中子组件接收数据时可在props中进行定义；而当子组件完成数据修改后，则可调用emit方法将更新的数据传递给父组件。

41.vue-router有哪几种路由守卫?

全局守卫：
beforeEach((to: any, from: anyPartial<Promise>, next: anyPartial<PromiseFunction>) => {通过调用next来实现对该钩子的解决} ),
beforeResolve((to: any, from: anyPartial<Promise>) => {该函数不接受参数} ),
afterEach((to: any, from: anyPartial<Promise>) => {不接受参数并执行该函数} )

路由独享守卫：
beforeEnter((to, from, next) => {} ),

三个守卫函数中前两个可以在回路中使用回调和访问实例

第三个守卫函数在离开时触发

他们执行顺序：全局》路由》组件

42.keep-alive是什么？

keep-alive：该机制实现了一种持久化缓存功能，在操作上只会执行一次且无需删除相关实例。由keep-alive机制保护的动态组件具备激活与禁用操作功能。
当该机制作用于动态组件时会存储那些不再活跃的实例而不删除它们也不会生成DOM元素也不会出现在父级容器中其主要作用是维持组件状态并防止重复渲染

43.router 和 route的区别？

1. $router是VueRouter的一个实例化对象，在网络请求处理方面具有全局性。
2. $route代表全局范围内的网络请求处理机制中的一个特定路径配置项，在触发路由跳转时会生成对应的本地管理特定路径资源的对象。
   每个网络路径配置中都会自动生成一个对应的route对象，并包含一系列关键的路由属性和参数设置。

44.v-clock有什么作用？

通过设置样式参数来实现插值表达式的闪现效果

45.params 和query 的区别？

1. 使用方法 parameters 可以通过 name 引用来替代 this.route.params.name 的位置参数。同样地，在 this.route.query.name 中使用 path 引入。
2. URL路径显示时, q（query）类似于 AJAX 的 GET 请求方式，在 URL 地址栏中会展示传入的参数。而 parameters（params）则在 POST 请求中不会直接出现在 URL 地址栏。
3. parameters（params）的行为与之相反，在 POST 请求中通常不会显现在 URL 地址栏。

46.Assets和static的区别？

共同点：两者均用于存储静态资源文件；区别：assets中的静态资源在打包过程中会被压缩并整合到static目录中，并与index.html一起上传；而static目录中的静态资源则 bypass了这些优化步骤，并直接进入预装好的位置后直接上传至服务器

47.有列表页进入到详情页的思路?

1. 在列表页为某个元素设置点击事件，并发送一个参数到methods方法中，在其中执行跳转操作（this.$router.push(...)）。
2. 在router.js中设置路由配置项：定义路径为"路径"并包含一个可选的参数。
3. 在详情页调用mounted()方法以获取从组件传来的参数，并将其赋值给this.$route.params中的指定字段。

48.参数to、from、next分别是什么意思？

① 目的地：（route路由对象）即将前往的目标路由对象
② 正在从当前的位置移动到另一个位置：（route路由对象）当前导航正要离开的路由
③ 必须调用此功能：（funciton函数）一定要调用该方法来解除此钩子

49.详述Vuex运行机制？

1. VES的状态存储采用了响应式的设计。
2. 当Vue组件从Store中读取数据时，在Store的状态发生变化后,相应的组件也会随之更新其状态.
3. 无法直接修改State(即 store 中的实际 state),而是需要通过显式的提交(commit)操作来记录每个 state 的变化.

50.简述拦截器是什么，共有几个拦截点，分别是什么？

拦截器：动态拦截action调动的对象
拦截点：共有四个拦截点：

    request（发送一个请求）
    1、 success （成功）
    2、 fall （失败）
    response（服务器响应）
    1、 success （成功）
    2、 fall （失败）
    
    
      
      
      
      
      
      
    
    代码解读

51.简述webpack？

Webpack 的核心功能是一个 模块打包引擎 ，其主要目标是整合多个 JavaScript 文件到一个打包后的文件中，并使这些文件能够在浏览器中高效地运行。
在编译流程中，
entry 点标识整个编译过程的起点，
而 output 点则标志着整个编译流程的完成。
每个 Module 通过 定义作用域划分 来实现其特定的功能。
此外，
plugins 插件 则负责对已打包文件进行二次加工，
以满足特定的应用需求。

52.vue父组件和子组件生命周期的顺序

1. 渲染流程步骤：
   父组件初始化前 -> 父组件完成渲染 -> 父组件初始化前子组件 -> 子组件完成渲染前 -> 子组件完成渲染 -> 子组件初始化前 -> 子组件完成 mount -> 父组件完成 mount
2. 更新流程步骤：
   父组件启动更新流程：
   父组件初始化前 -> 父组件完成更新 -> 子组件初始化前 -> 子组件完成更新前 -> 子组件完成更新 -> 父组件完成更新
   子组件启动更新流程：
   父组件初始化前 -> 子组件初始化前 -> 子组件完成更新-> 父 组件完成 更新
3. 销毁流程：
   父 组件 初始化 前子 组件 )-> 子 组件 完成 销毁 )-> 父 组件 完成 销毁

53…vue中父组件能监听到子组件的生命周期吗

    // 这里是父组件
    <template>
    	<child
    	@hook:mounted="getChildMounted"
    	/>
    </template>
    <script>
    method: {
    	getChildMounted () {
    		// 这里可以获取到子组件mounted的信息
    	}
    }
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

54.watch能监听到数组的pop行为吗

对于处理具有返回值的数据而言，在使用 watch 时就能够实现实时监控和响应功能。例如，在 JavaScript 中进行操作如 pop、push、unshift 和 map 等时（或：例如在 JavaScript 中进行 pop、push、unshift 和 map 等操作时），watch 能够及时捕获并反馈相应的事件。

55.watch如何实现深度监听

    watch: {
    	obj: {
    		handler: function(val) {
    		},
    		deep: true // 深度监听
    	}
    }
    
    
      
      
      
      
      
      
      
    
    代码解读

56.vue中如何解决页面不重新渲染问题?.

(1)修改对象属性后,页面未重新渲染:

     this.$set(对象名称, '属性名', '属性值')
    
    
      
    
    代码解读

(2)使用this.$forceUpdate()方法可重新渲染页面

57.vue创建组件的时候data中为什么会被return出一个对象？

防止组件与组件之间变量的局部污染

58.什么是路由懒加载

通过异步的方式来加载对应的路由组件，提高页面的加载速度

59.什么是SPA？

SPA是单页面应用程序，vue react angular 都是,整个项目只有一个页面

60.vue-router怎么配置404页面？

    {
    // 会匹配所有路径
    // 含有通配符的路由应该放在最后
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
    }
    
    
      
      
      
      
      
      
      
    
    代码解读

61.切换路由时自动或提示保存草稿功能，如何实现？

    beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存 
      }else{
    next(true);//用户离开
      }
    }
    
    
      
      
      
      
      
      
      
    
    代码解读

62…vue-cli生成的项目可以使用es6、es7的语法吗？为什么？

使用了babel和webpack进行打包时会将高级语法转换为ES5版本因此无需担心上线问题；然而脚手架仅设置了部分默认常用功能例如装饰器等结构还需要额外设置。（根据bababel官网可以配置一些尚未定稿的语法）

63.什么是虚拟DOM？

使用JS来模拟DOM树结构

由于每次查询DOM都会遍历整颗DOM树，相当消耗计算资源。

利用JS中的对象嵌套结构来表示DOM树时，在每次对DOM进行修改的过程中都会转换为对JS对象属性的操作。这种做法将有助于降低系统的性能消耗

64.怎么捕获组件vue的错误信息？

1.errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：

1.错误对象

2.发生错误的组件实例

3.包含错误来源信息的字符串。

此钩子可以返回 false 以阻止该错误继续向上传播。

注意：仅限于父组件能够处理子组件的错误，在Vue主实例上无法直接实施该功能。

    errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
     return false;
      }
    
    
      
      
      
      
    
    代码解读

2.errorHandler

    Vue.config.errorHandler = function(err, vm, info) {
      console.log(`Error: ${err.toString()}\nInfo: ${info}`);
    }
    err：error对象
    info：是一个Vue特有的字符串
    vm：Vue应用本身。
    在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。
    
    
      
      
      
      
      
      
      
    
    代码解读

65.为何Vue采用异步渲染?

为了避免在每次数据更新时导致组件重绘这一现象的发生, Vue 开发者通常会优先选择异步渲染模式.考虑到性能优化的需求, Vue 会在完成当前轮次的数据更新后,再次进行异步视图刷新.

66…vue如何优化首页的加载速度？

1.路由、图片懒加载

2.DNS预解析dns-prefetch

3.CDN分发

4.按需加载三方资源

5.webpack开启gzip压缩

67.ajax请求放在哪个生命周期中

在创建阶段, dom未被渲染显示.因此, 在直接操作dom节点时会导致无法获取所需元素.

在mount过程中，在dom已经生成的情况下可以直接操作dom节点。通常建议将所有情况整合到mount阶段以确保逻辑的一致性；然而由于普通生命周期事件是同步执行而ajax事件是异步执行的特点。值得注意的是，在服务端渲染场景下无法使用mounted方法因此建议将此类情况归类到created阶段。

68.Vue 应用运行时性能优化措施

（1）将 Vue 文件导入到生产环境中。
（2）采用单文件组件预编译模板。
（3）将组件的 CSS 分离至独立文件。
（4）通过调用 Objectfreeze 方法来提高性能。
（5）优化为扁平化结构。
（6）恰当地利用持久化数据存储机制。
（7）实现组件按需加载技术。

69.Vue 应用加载性能优化措施

（1）服务端渲染 / 预渲染
（2）组件懒加载

70.vue全家桶包含哪些？

Vue.js框架用于构建整体架构，并基于Vue.js的状态管理解决方案用于实现应用状态控制。同时配合Vue-router（路由）组件完成项目的路由管理和导航功能，并与基于Vue.js的资源管理模块与Axios联合部署以实现异步请求处理。此外还引入了轻量级移动端UI框架库用于提升移动端用户体验以及antd-vue(PC端UI框架库)以优化PC端界面设计

Vue.js框架用于构建整体架构，并基于Vue.js的状态管理解决方案用于实现应用状态控制。同时配合Vue-router（路由）组件完成项目的路由管理和导航功能，并与基于Vue.js的资源管理模块与Axios联合部署以实现异步请求处理。此外还引入了轻量级移动端UI框架库用于提升移动端用户体验以及antd-vue(PC端UI框架库)以优化PC端界面设计

71.v-if和v-for一起使用的弊端以及解决办法

由于v-for的优先级高于其对应的if语句，在每次循环执行时都会自动触发一次if判断以更新状态。这种机制会导致频繁地生成与释放DOM对象（DOM Document Object），从而不断地生成与释放DOM对象以维持显示效果。这种方法虽然简洁直观但会导致页面性能下降甚至出现卡顿现象。解决方案包括：首先将整个循环体包裹在一个额外的div容器中；其次将所需的条件判断逻辑放置于computed属性中并将其传递给内部if语句以完成状态更新任务

72.beforeDestroyed里面一般进行什么操作

beforedestoyed是一个在组件销毁之前执行的关键生命周期阶段，在此期间我们可以在该阶段运行一系列操作如清除回调函数或定时器以及执行数据初始化等操作

73.provide和inject特性

在vue2.2.0 中新增provide和inject属性

所采用的方式极为简便：父组件通过提供机制传递数据给子组件，在此过程中其他子组件则可借助注入机制获取所需数据

请注意，在某些情况下我们并不推荐将此功能直接嵌入到应用程序代码中。常见用途是在构建特定组件组合时，在涉及底层组件间的数据传输需求时使用。

The 'provide' parameter must be an object or a function that returns an object.

一个字符串数组（或）
该对象是一个由提供者返回的对象：
其中键为本地绑定名（自定义的一个名字），值具体为字符串或Symbol。

一个对象及其属性如下：
该对象的from属性通过提供接口传递（其类型为字符串或Symbol）。
该对象的default属性用于处理降级情况时采用指定值。
例如：

父组件

    <template>
      <div>
    <h1>HelloWorld</h1>
    <One></One>
      </div>
    </template>
    
    <script>
    import One from "./One";
    export default {
      components: { One },
      // provide: {
      //   form: "这是父组件的provide"
      // }
      provide() {
    return {
      form: "这是父组件的provide"
    };
      }
    };
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

子组件1：

    <template>
      <div>
    <h2>childOne组件</h2>
    {{demo}}
    <Two></Two>
      </div>
    </template>
    
    <script>
    import Two from "./Two.vue";
    export default {
      name: "One",
      // inject: ["form"],
      inject: {
    form: {
      default: () => ({})
    }
      },
      data() {
    return {
      demo: this.form
    };
      },
      components: {
    Two
      }
    };
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

子组件2：

    <template>
      <div>
    <h2>childtwo组件</h2>
    {{demo}}
      </div>
    </template>
    
    <script>
    export default {
      name: "Two",
      // inject: ["form"],
      inject: {
    for: {
      default: () => ({})
    }
      },
      data() {
    return {
      demo: this.form
      // demo: "childTwo"
    };
      }
    };
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

74.vue中父组件如何获取子组件的属性和方法

在子组件上定义ref属性来获取子组件的属性和方法

    // 这里是父组件
    <templete>
    	<child ref="child"/>
    </templete>
    <script>
    method: {
    	getChild () {
    		this.$refs.child.属性名（方法名）
    	}
    }
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

75.watch和computed的区别

watch：监听数据变化，并执行一个回调函数

computed：指对现有数据进行处理，并具备缓存机制。仅在数据发生变化时才会重新计算。

76.vue中父组件能监听到子组件的生命周期吗

能，通过@hook:进行监听代码如下：

    // 这里是父组件
    <template>
    	<child
    	@hook:mounted="getChildMounted"
    	/>
    </template>
    <script>
    method: {
    	getChildMounted () {
    		// 这里可以获取到子组件mounted的信息
    	}
    }
    </script>
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读

77.vue中的事件修饰符主要有哪些？分别是什么作用？

.stop：阻止默认行为被触发
.native：绑定本机特有的系统调用
.once：仅会在第一次被激活时执行操作
.self：将该操作与当前对象相关联以避免触发其他相关的系统调用
.prevent：防止默认行为发生并确保后续操作不受影响
.caption：用于捕获特定的系统调用相关信息

78.vue创建组件的时候data中为什么会被return出一个对象？

防止组件与组件之间变量的局部污染

79.vue中有哪些内置组件？

1. transtion
2. transition-group
3. keep-alive
4. slot
5. component

80.怎么捕获组件vue的错误信息？

1.errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：

1.错误对象
2.发生错误的组件实例
3.包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。
注意：只能在父组件中处理子组件的错误，没法直接在Vue的主实例中使用它。

     errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
     return false;
      }
    
    
      
      
      
      
    
    代码解读

2.errorHandler

    Vue.config.errorHandler = function(err, vm, info) {
      console.log(`Error: ${err.toString()}\nInfo: ${info}`);
    }
    err：error对象
    info：是一个Vue特有的字符串
    vm：Vue应用本身。
    在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。
    
    
      
      
      
      
      
      
      
    
    代码解读

81.为什么vue使用异步更新组件？

批量更新，收集当前的改动一次性更新，节省diff开销

82.vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：创建一个新的Vue组件文件，并将其命名为indexPage.vue。该组件必须包含export default {}以确保正确加载。
第二步：在需要使用该组件的页面或应用中进行引入操作。具体来说，在需要用到组件的地方导入对应的代码片段。
第三步：将该组件注入到Vue实例中的components属性中。这样可以在后续开发过程中方便地调用该功能模块。
第四步：在应用的整体架构设计中进行配置。具体来说，在视图模板中配置相关参数和变量。
例如，在实现具体的业务逻辑时，默认设置实例名称为indexPage，则在其对应的位置直接使用index-page即可完成引用操作。

83.vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。
不进行页面按需加载引入方式：import home from ‘…/…/common/home.vue’
进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))

84.v-show和v-if指令的共同点和不同点

v-show功能模块是通过设置元素的display CSS属性来实现展示或隐藏功能。
v-if特性动态地通过销毁和重建DOM结构来实现元素展示与隐藏的效果。

85.简单描述VUE每个周期具体适合哪些场景

1.beforecreate阶段可以触发loading事件，在实例加载过程中自动执行相应的初始化步骤。
2.当初始化完成后会触发相关的基本操作和配置流程。
3.mounted操作完成之后能够直接获取到DOM节点对象进行后续处理。
4.updated后的统一处理函数可以在对应位置集成调用以实现一致的数据管理逻辑。
5.in the beforeDestroy阶段需要设置一个确认对话框用于阻止元素销毁过程的发生。
6.everytime data update的时候需要立即执行dom相关的操作以保证状态的一致性。

86.Vue.set() 响应式新增与修改数据

什么情况下使用$set？

Vue 在实例初始化时会建立双向数据绑定关系，并通过调用Object.defineProperty()方法，并为每个属性动态添加getter和setter函数来实现这种绑定。因此，在data对象中已存在的属性才能完成上述操作流程，并从而实现动态交互以达到响应效果的目的。如果我们需要向对象新增一些新的属性，则这些新添加的属性尚未经过前述绑定步骤，在这种情况下会发生什么情况呢？这些新添加的属性尚未经过前述绑定步骤会导致页面不会随之发生改变吗？为了避免这种情况的发生，则应在新增这些属性后立即调用$set方法以确保其具有响应性特征。

为响应式对象新增一个属性，并使其也成为响应式的同时导致视图更新。这一操作必须用于为该响应式对象增添新的属性，请注意因为 Vue 无法识别普通的新增属性

在Vue框架中对对象内部进行某些修改时，默认情况下由于未被Vue系统捕获变化而导致视图未及时更新。此时可以通过调用官方提供的$set方法来强制刷新UI以确保显示最新数据。

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你通过索引直接赋值一个数组元素时,例如: vm.items[indexOfItem] := newValue 当你更改数组的长度时,例如: vm.items.length := newLength

87.vue请求数据放在created好还是mounted里好

建议放在created里

(created: 在模板生成为 html 之前执行 created 函数)。
这相当于一般会设置某些属性的初始值之后生成视图。

mounted: 在模板转为HTML并渲染完成之后被调用，在页面初始化完成后通常会对其DOM节点执行必要的操作。

如果在mounted钩子函数中请求数据可能导致页面闪屏问题

这涉及到加载时机的问题。如果将加载时机设置在created字段，则会在mounted触发之前完成。这样，在页面完全挂载完成后发起请求时就不会出现闪屏现象。

88.vue中对于对象的更改检测

由于javascript的限制，vue不能检测对象属性的添加和删除

当已经创建了实例时，vue无法动态添加根界别的响应式属性；然而，在嵌套对象中，则可采用Vue.set(object,key,value)的方法来实现响应式属性的设置。值得注意的是，在服务器端渲染期间未被调用该钩子

89.vue计算属性和缓存和方法调用有什么区别

1、计算属性必须返回结果

2、计算属性由其依赖缓存决定。当一个计算属性所依赖的数据发生变动时，则该属性会重新赋值。

3、在进行大规模数据处理时,应根据是否需要缓存机制来决定是采用compute properties还是methods。建议优先采用compute properties以提高效率。

4. 计算属性基于它们的依赖被自动触发或执行, method依赖于事件调用.

对于 method ，只要发生重新渲染，method 调用总会执行该函数

99.v-model实现机制

我们先简单介绍一下v-model的工作原理：v-model会将关联的响应式数据（如info.message）实时地绑定到表单元素的value属性上，并通过监听表单元素的input事件来动态更新这些值。具体来说，在响应式数据发生变化时（如当用户输入信息），表单元素的value属性也会相应地同步更新；而当用户直接对表单元素进行输入操作时（如键盘输入），input事件会被触发，并执行相应的回调逻辑以将最新的value值传递给v-model绑定的响应式数据源。

100.完整的vue-router导航解析流程

导航触发事件后，在已关闭组件中执行退出守护任务；随后，在可重用组件中执行 beforeRouteUpdate 守卫任务（版本需≥2.2）；接着，在路由配置模块中进行异步路由解析；当目标组件激活时执行 beforeRouteEnter；启动全局 beforeResole 保护（仅适用于版本≥2.5）；完成操作后，在所有场景下启动全局 afterEach 任务；最终触发DOM更新流程；利用预先创建好的实例，在beforeRouteEnter 父回调函数中传递next参数。

101.vue中key值得作用

当 Vue.js 使用 v-for 对已渲染的元素列表进行更新时，默认采用"就地复用"策略。若数据项的顺序发生变化，则 Vue 在不移动 DOM 元素以匹配数据顺序的情况下，并非简单复用当前每个元素；而是确保每个索引处显示之前已渲染的所有元素。其主要作用在于高效地更新虚拟DOM

该字段的功能旨在通过diff算法在执行时快速定位到对应的节点以加快diff过程的速度

key具有唯一性

在Vue脚本中，在循环结构中添加 :key属性并赋值为"唯一标识"非常必要。这种做法不仅允许通过唯一标识符（如id、index等）来区分组件实例，在Vue组件高度复用的情况下能够有效提升对组件实例的独特识别能力。更清晰地区分各个组件实例之间的区别其主要作用在于显著提高虚拟DOM的更新效率

该系统采用无key设计并简化操作模板，在此前提下能够更加高效地复用节点资源。从diff速度上来看的话，则是不带key的情况下会更快捷。值得注意的是，在增删操作上会耗费更多时间。而这种默认模式实际上是VUE文档所描述的默认行为——即在没有键的情况下对节点进行就地复用以提升性能表现。然而这种做法并非单纯依赖键值实现的功能——它实际上是允许在无需键的情况下对节点进行就地复用从而优化性能的一种策略。这种设计虽然带来了性能上的提升但同时也伴随了一些潜在的问题：例如可能不会产生预期的过渡效果或者在某些情况下可能导致状态偏移问题——特别是当某个节点绑定表单或其他动态数据时容易出现状态错位的情况。此外有人认为引入键值机制虽然能加速diff过程但这种方式存在争议性。

102.vuex和单纯的全局对象有以下两点不同

在vuex的设计中采用了响应式架构，在vue组件从store获取状态的过程中，在state发生变化时（或state发生变更时），随后会随之而来的高效同步更新（或高效的同步更新）相关组件的状态信息以确保数据的一致性与及时性。

2、你无法直接修改store的状态。在store中更改状态的主要方式是提交（commit）操作。通过这种方式我们能够方便地追踪到每个状态的变化情况。

103.你怎么理解vue是一个渐进式的框架？

我认为渐进式的理念在于无需一开始就依赖Vue的全功能集合。这种开发方式允许根据具体场景灵活选择所需插件，在实际应用中能够事半功倍。同样地，在vue框架下也不需要过多设定就可以实现预期效果

104.vue中的过滤器

滤镜：可对数据执行多种筛选操作并返回所需结果，在使用上非常便捷高效。
共有两种类型：全局滤镜和局部滤镜。
滤镜要想获取我们的数据，则需通过所谓的"管道符 | "来完成这一操作。

105.vue中的diff算法

传统Diff算法采用循环递归方式对节点进行比对，并分析每个节点的状态以及需要执行的操作（包括添加、删除和修改）。最终依据Virtual DOM构建DOM结构。
Vue Diff算法的核心逻辑专注于比较同级节点之间的差异。当发现存在相同类型的父级元素时，则对该父级元素的具体内容进行对比分析，并根据对比结果生成差异说明。当发现存在相同类型的子级元素时，则对该子级元素的内容进行对比分析，并根据对比结果生成差异说明。当发现存在不同类型的父级元素时，则插入新的父级元素并生成相应的差异说明。当发现存在不同类型的子级元素时，则插入新的子级元素并生成相应的差异说明。并移除那些在新文档中未出现的新旧条目。

106.vue中怎么实现css选择器隔离

标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

107.created和mounted的区别

created: 在DOM生成之前被调用, 常见地设置一些属性值, 然后再执行DOM生成。
mounted: 在DOM生成之后被调用, 常见地完成页面初始化后, 对DOM节点进行后续操作。

108.vue获取数据在哪个周期函数

根据具体情况，
通常可以在 created（或beforeRouter） 内直接实现。
若涉及页面加载完成后的情况，则采用 mounted 来处理。

109.vue-router 是什么?它有哪些组件

这里的路由系统即是单页应用的路径管理器，在项目开发中通常与之深度集成使用。可以说得更通俗一些的话，则是WebApp中的链接路径管理系统。作为Vue.js官方指定的技术方案之一，在项目开发中特别适合用于构建基于Vue.js的一站式组件库。而Vue.js构建的一站式组件库则会基于动态路由和组件实现，并且能够实现对不同组件的位置关系进行动态定位。传统的网页应用则是通过一些超链接来实现页面切换和跳转的功能，在这种架构下无法直接使用A标签来进行节点之间的跳转控制。必须依靠.vue-router来实现对不同节点之间的跳转控制，并建立起url地址与页面内容之间的对应关系

110.简述每个周期具体适合哪些场景？

1、在beforeCreate阶段可以添加一个loading事件，在加载实例时触发。
2、创建完成后发生的事件在此处处理，并且在此处结束loading后也可以进行异步请求。
3、挂载元素后会立即返回对应的dom节点。
4、当需要对数据进行统一处理时，在此阶段编写相应的处理函数。
5、在beforeDestroy阶段可以设置一个确认对话框以确认程序终止。

111.聊聊你对Vue.js的template编译的理解？

首先将原始内容转换为AST树后生成对应的渲染函数（该函数返回VNode类型变量）。该过程涉及多个关键步骤：首先通过编译器将模板内容转换为AST语法树；其次利用生成器将AST结构转化为可执行代码；最后将这些代码整合到主程序中即可完成功能实现。
具体来说，在编译过程中：

1. 使用编译器将模板内容转换为 AST 语法树；
2. 创建编译器所需的辅助功能；
3. 处理选项合并等操作。
   生成阶段则包括：
4. 将 AST 转换为可执行代码字符串；
5. 处理代码中的标签名及子节点关系；
6. 最终整合所有组件以完成系统功能。

112.vue自适应？

引入lib-flexible

113.vue的整个实现流程？

1、第一步：解析模板成render函数
template
2、第二步：响应式开始监听
object.defineProperty
data属性代理到vm上
3、第三步：首次渲染，显示页面，且绑定依赖
（1）为何要监听get,直接监听set不行吗？
①data中有很多属性，有些被用到，有些可能不被用到（data中没有人访问，就不会用get，如没有{{aaa}}指的就是aaa没有被访问）
②被用到的会走到get，不被用到的不会走到get
③未走到get中的属性，set的时候也无需关心
④避免不必要的重复渲染
4、第四步：data属性变化，触发rerender
defineProperty, get, set
（1）修改属性，被响应式的set监听到
（2）set中执行updateComponent
（3）updateComponent重新执行vm._render()
（4）生成的vnode和prevVnode,通过Patch进行对比，渲染到html

114.为什么避免v-if和v-for一起使用？

1、当vue执行指令时，在共享同一个节点的情况下使用v-for和v-if时，v-for的优先级高于v-if。这意味着每个嵌套在另一个中的情况下会多次运行各自的脚本。
2、解决方案是将所有的v-if包裹在一个div中。

115.axios 是什么

axios是通过promise实现对ajax技术的一种封装

116.axios 特点

1. 该AJAX库以Promise技术为基础，并支持Promise的所有API功能。
2. 在浏览器端和Node.js端均可使用，并通过创建XMLHttpRequest实例来处理 request。
3. 该AJAX库具备完整的 request/response interception 功能。
4. 提供取消部分未完成 request 的能力。
5. 该AJAX库能够将输入的 request data 与返回的数据自动转换为JSON格式。
6. 实现批量发送多批次 request 的功能。
7. 该AJAX库的安全性能显著提升。具体而言，在客户端层面实现了防御XSRF的能力：每个 request 都会携带一个从Cookie中获取的一个密钥；根据浏览器的同源策略判断来源（即假冒网站无法获取 cookie 中保存的关键），从而提高整个系统的安全防护能力。

117.axios相比原生ajax的优点

ajax：

1、本身是针对MVC编程，不符合前端MVVM的浪潮

2、采用基于原生XHR的技术实现后发现其架构不够清晰已有其他更合适的替代方案可供选择若仅依赖于AJAX技术则必须引入整个jQuery库体系这种做法显得非常不合时宜即使采用分步打包的方式也无法充分释放CDN服务的优势

3、ajax不支持浏览器的back按钮

4、安全问题ajax暴露了与服务器交互的细节

5、对搜索引擎的支持比较弱

6、破坏程序的异常机制

7、不容易调试

axios：

1、从node.js创建http请求

2、支持Promise API

3、客户端防止CSRF（网站恶意利用）

4、提供了一些并发请求的接口

118.vue路由切换和用location切换url的区别

采用location.href=’/url’的方式进行跳转较为便捷但也带来了页面刷新的问题
此外，在采用router.push(’/url’)进行跳转时采用了基于diff算法的技术实现按需加载从而降低了dom资源的消耗
在历史记录中通过静态数据实现网页浏览而避免了页面刷新