Vue.js面试题精选—9

81 Vue的事件绑定原理

原生 DOM 的绑定：Vue在创建真实DOM时会调用 createElm ，默认会调用 invokeCreateHooks 。会遍历当前平台下相对的属性处理代码，其中就有 updateDOMLListeners方法，内部会传入 add（） 方法
组件绑定事件，原生事件，自定义事件；组件绑定之间是通过Vue中自定义的 $on 方法实现的

可以理解为：组件的 nativeOnOn 等价于普通元素on 组件的on会单独处理

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

v-model 可以看成是 value+input 方法的语法糖（组件）。原生的 v-model ，会根据标签的不同生成不同的事件与属性。解析一个指令来

自定义：自己写 model 属性，里面放上 prop 和 event

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

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick

dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ， queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue ）在下一tick中刷新watcher队列（异步）

84 Vuex 工作原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。下图单向数据流示意图：

Vue.js面试题精选---9 — image-20210220193818922

vuex，多组件共享状态，因-单向数据流简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态

85 如何从真实DOM到虚拟DOM

涉及到Vue中的模板编译原理，主要过程：

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

86 Computed watch 和 method

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用computed
watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch。
method：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大