前端面试题---vue篇

Vue的生命周期

1、vue创建前（beforeCreate）→销毁（destoryed）的过程;

2、有多个事件钩子，可以在控制整个vue实例的过程时，更容易形成好的逻；

3、第一次页面加载会触发的钩子有 创建前/后(beforeCreate/created)、载入前/后(beforeMount/mounted);

生命周期方法

beforeCreate 在实例初始化之后，数据观测（data observe）和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。

created 实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测（data observe ），属性和方法的运算，watch/event 事件回调。这里没有 $el，如果非要想与 DOM 进行交互，可以通过vm.$nextTick 来访问 DOM。

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom节点。

beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁 （patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated 发生在更新完成之后，当前阶段组件 Dom 已经完成更新。要注意的是避免在此期间更新数据，因为这个可能导致无限循环的更新，该钩子在服务器渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步，实力仍然完全可用。我们可以在这时进行 善后收尾工作，比如清除定时器。

destroy Vue实例销毁后调用。调用后，Vue实例指示的东西都会解绑定，所有的事件监听器会被移除，左右的子实例也会被销毁，该钩子在服务器端渲染不被调用。

vue 内置指令

• v-once ： 定义它的元素或组件只渲染一次，包括元素或组件的所有节点，首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。
• v-cloak ： 这个指令保持在元素上直到关联实例结束编译 -- 解决初始化慢到页面闪动的最佳实践。
• v-bind ： 绑定属性，动态更新HTML元素上的属性。例如 v-bind:class。
• v-on ： 用于监听DOM事件。例如 v-on:click v-on:keyup
• v-html ： 赋值就是变量的innerHTML -- 注意防止xss攻击
• v-text ： 更新元素的textContent
• v-model ： 1、在普通标签。变成value和input的语法糖，并且会处理拼音输入法的问题。2、再组件上。也是处理value和input语法糖。
• v-if / v-else / v-else-if  ： 可以配合template使用；在render函数里面就是三元表达式。
• v-show ： 使用指令来实现 -- 最终会通过display来进行显示隐藏
• v-for ： 循环指令编译出来的结果是 -L 代表渲染列表。优先级比v-if高最好不要一起使用，尽量使用计算属性去解决。注意增加唯一key值，不要使用index作为key。
• v-pre ： 跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度。
• 

Vue组件通讯

1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。

7、vuex 状态管理。

为什么data是一个函数

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

v-if 和 v-show 的区别

v-if 在编译过程中会被转化成三元表达式，条件不满足时不渲染此节点。适用于在运行时很少改变条件，不需要频繁切换条件的场景。

v-show 会被编译成指令，条件不满足时控制样式将此节点隐藏（display:none）适用于需要非常频繁切换条件的场景。

v-if 和 v-for 为什么不建议一起使用

v-for和v-if不要在同一标签中使用，因为解析时先解析v-for在解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。

v-for中key的作用

key属性必须是唯一的标识，且不可改变。

主要作用是提高渲染性能，可以避免数据混乱。

实现数据绑定的做法：

发布者-订阅者模式（backbone.js）

脏值检查（angular.js）

数据劫持（vue.js）

Vue数据双向绑定

Vue实现这种数据双向绑定的效果，需要三大模块：

1. Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

数据监听器Observer：Observer的核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher。

订阅者Watcher：Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

1. 在自身实例化时往属性订阅器(dep)里面添加自己
2. 自身必须有一个update()方法
3. 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

指令解析器Compile：Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

Vue双向绑定是如何实现的，原理是什么？

vue实现数据双向绑定主要是：

1. 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。
2. vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}  ），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
3. 在这里推荐一遍我觉得特别好的文章，剖析Vue原理&实现双向绑定MVVM

computed，methods，watch的区别

效果一样，

computed：

        是基于它的依赖缓存，依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里边不能异步的返回结果。

methods：

         在重新渲染的时候，函数总会重新调用执行。

watch：

        侦听的值改变会重新执行函数，将一个值重新赋值作为最新的结果，所以赋值的时候可以进行异步操作。

什么是路由

根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是端到端的网络路径

vuex

        是一个专为vue.js应用程序开发的状态管理模式。并以相应的规则保证状态以一种可预测的方式发生变化。

        vuex可以解决父子组件、兄弟组件通信问题。

主要模块

state,getter,mutation,action,module

state:

        用于数据存储，是store中的唯一数据源。

mutation：

        类似函数，改变state数据的唯一途径，不能用于处理异步事件。

actions：

        类似mutation，用于提交mutation来改变状态，而不是直接改变状态，可以包含任意异步操作。

gettter：

        可以对state进行计算操作，store的计算属性。虽然组件可以使用计算操作，但getter可以在多个组件之间复用。