vue 相关问题（1）

1、Vue 的双向绑定原理

所谓的双向绑定原理是建立在 MVVM 基础上的：

• 数据层 Model：应用的数据以及业务逻辑
• 视图层 View：应用的展示效果，各类的 UI 组件等
• 业务逻辑层 ViewModel：负责将数据和视图关联起来

数据变化后更新视图，视图变化后更新数据

包含两个主要的组成部分：

监听器 Observer：对所有的数据属性进行监听

解析器 Compiler：对每个元素节点进行扫描和解析，根据指令替换数据，绑定对应的更新函数

具体的实现原理：

1. new Vue() 执行初始化，对 data 通过 Object.defineProperty 进行响应式处理，这个过程发生在 Observer 中，每个 key 都会有一个 dep 实例来存储 watcher 实例数组
2. 对模板进行编译时，v- 开头的关键词作为指令解析，找到动态绑定的数据，从 data 中获取数据并初始化视图，这个过程发生在 Compiler 里，如果遇到了 v-model，就监听 input 事件，更新 data 对应的数值。
3. 在解析指令的过程中，会定义一个更新函数和 watcher，之后对应的数据变化时 watcher 会调用更新函数，new Watcher 的过程中会去读取 data 的 key，触发 getter 的依赖收集，将对应的 watcher 添加到 dep 里。
4. 将来 data 里的数据一旦发生变化，会首先找到对应的 dep，通知所有的 watcher 执行更新函数。

2. vue 的响应式原理

首先了解 Vue 中的三个核心类：

1. Observer：给对象的属性添加 getter 和 setter，用于依赖收集和依赖更新
2. Dep：用于收集当前响应式对象的依赖关系，每个响应式对象都有一个 Dep 实例，dep.subs =  watcer[]，当数据发生变更的时候，会通过 dep.notify() 通知各个 watcher
3. Watcher：观察者对象，render watcher，computed watcher，user watcher

依赖收集：

1. initState，对 computed 属性初始化时，会触发 computed watcher 依赖收集
2. initState，对监听属性初始化的时候，触发的 user watcher 依赖收集
3. render，触发 render watcher 依赖收集

派发更新：

Object.defineProperty.

1. 组件中对响应式数据的修改，会触发 setter 逻辑
2. dep.notify()
3. 遍历所有 subs，调用每一个 watcher 的 update 方法

总结原理：

当创建 vue 实例时，vue 会遍历 data 里的属性，Object.defineProperty 为属性添加 getter 和 setter 对数据进行读取劫持，getter：依赖收集，setter：依赖更新。每个组件实例都会有对应的 watcher 实例。

3、计算属性的实现原理

computed watcher 计算属性的监听器。

computed watcher 持有一个 dep 实例，通过 dirty 属性标记计算属性是否需要重新求值，当 computed 的依赖值改变后，就会通知订阅的 watcher 进行更新，对于 computed watcher 会将 dirty 属性设置为 true，并且进行计算属性方法的调用。

computed 所谓的缓存是指什么？

计算属性是基于他的响应式依赖进行缓存的，只有依赖发生改变的时候才会重新求值

4、Vue.nextTick 的原理

Vue 是异步执行 dom 更新的，一旦观察到数据的变化，把同一个 event loop 中观察数据变化的 watcher 推送进这个队列。在下一次事件循环时，vue 清空事件队列，进行 dom 的更新。

Promise.then > MutationObserver > setImmediate > setTimeoute

vm.someData = 'new value'，dom 并不会马上更新，而是在异步队列被清除时才会更新 dom

宏认为 -> UI render -> 宏认为

一般什么时候用到 nextTick 呢

在数据变化后要执行某个操作，而这个操作依赖因你的数据改变而改变的 dom ，这个操作就应该被放在 vue.nextTick 回调中。

5、说一下虚拟 dom ，并说一下优缺点

对于真实 dom 的抽象，用嵌套对象表示，用属性来描述节点，最终通过一系列操作映射到真实的 dom 上

优点：

1、保证性能下限，在不进行手动优化的前提下，也能提供过得去的性能

2、无需手动操作 dom

3、跨平台，虚拟 dom 本质上其实就是一个 js 对象，他可以很方便的跨平台，比如服务端渲染

缺点：

1、首次渲染大量 dom 的时候，由于多了一层虚拟 dom 的计算，回避 innerHTML 的插入速度慢

2、做一些针对性的优化时，真实 dom 的操作还是更快一点