面试题总结Vue

以下是对于面试题整理

1 MVVM

MVVM是Model-View-ViewModel缩写，Model代表视图层，View代表用户界面，ViewModel是链接视图和用户UI的核心枢纽

2 双向绑定原理Vue2

Vue在初始化数据时，会使用Object.defindProperty重新定义data中所有的属性，当页面使用对应的属性时，就会进行依赖收集(使用watcher)，如果属性发生变化就会通知相关依赖进行更新操作(发布订阅)。

3 Vue3 响应数据原理

Vue3 Proxy代替Object.definedProperty。因为Proxy可以直接监听对象和数组的变化，

4 Vue检测数组变化

使用函数劫持的方式。重写了数组的方法，Vue将data中的数组进行原型链重新，指向自己定义的数组原型方法。每当调用这些api时就会通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。

5 v-if 和 v-for 哪个优先级高？如果同时出现

v-for优先于v-if被解析，如果同时出现都会先执行循环在执行判断条件无论如何都会影响性能，可以在外层嵌套template，在外层进行判断，在内部进行循环。 如果条件出现在了循环内部可以通过计算属性提前过滤

6 Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?

Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态 变更将会影响所有组件实例，这是不合理的;采用函数形式定义，在initData时会将其作为工厂函数返 回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况

7 v-model中的实现原理及如何自定义v-model

v-model 可以看成是 value+input 方法的语法糖（组件）。原生的 v-model ，会根据标签的不同生成不同的事件与属性。解析一个指令来。 自定义：自己写 model 属性，里面放上 prop 和 event。

8 为什么Vue采用异步渲染呢

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。 dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ，queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue ）在下一tick中刷新watcher队列（异步）

9 nextTick

异步方法，异步渲染最后一步，与JS事件循环联系紧密。主要使用了宏任务微任务（setTimeout、promise那些），定义了一个异步方法，多次调用nextTick会将方法存入队列，通过异步方法清空当前队列

10 Vue的生命周期

created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。
mounted：实例已经挂载完成，可以进行一些DOM操作。 beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。
updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。
destroyed：可以执行一些优化操作，清空计时器，解除绑定事件。

一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用

11 Vue组件通信

• 父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 emit 触发自己的事件（发布订阅）
• 利用父子关系 children ， 获取父子组件实例的方法。
• 父组件提供数据，子组件注入。 provide 、 inject ，插件用得多。
• ref 获取组件实例，调用组件的属性、方法
• 跨组件通信 Event Bus （Vue.prototype.bus=newVue）其实基于on与$emit
• vuex 状态管理实现通信

12 如何从真实DOM到虚拟DOM

1、将模板转换成 ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）
2、优化树
3、将 ast 树生成代码

13 用VNode来描述一个DOM结构

虚拟节点就是用一个对象来描述一个真实的DOM元素。首先将 template （真实DOM）先转成 ast ， ast 树通过 codegen 生成 render 函数， render 函数里的 _c 方法将它转为虚拟dom

14 Computed watch

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed
watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch

15 v-if 和 v-show 区别

• v-if 如果条件不成立不会渲染当前指令所在节点的DOM元素
• v-show 只是切换当前DOM的显示与隐藏

16 描述组件渲染和更新过程

渲染组件时，会通过 vue.extend() 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程，核心就是 diff 算法。

17 为什么要使用异步组件？

• 节省打包出的结果，异步组件分开打包，采用jsonp的方式进行加载，有效解决文件过大的问题。
• 核心就是包组件定义变成一个函数，依赖 import（） 语法，可以实现文件的分割加载。

18 keep-alive

keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载。常用的2个属性 include/exclude ，2个生命周期 activated ， deactivated

19 action 与 mutation 的区别

-mutation 是同步更新， $watch 严格模式下会报错 -action 是异步操作，可以获取数据后调用 mutation 提交最终数据