学习十五、Vue 的响应式原理

一、 数据驱动

 

- 数据响应式、双向绑定、数据驱动

 

- 数据响应式：

  数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，

  避免了复杂的 DOM 操作，提高开发效率。

 

- 双向绑定

  数据改变，视图改变；视图改变，数据改变。

  我们可以使用 v-model 在表单元素上创建双向数据绑定

 

- 数据驱动是 Vue 最独特的特性之一

  开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图上的。

 

二、 Vue2.X 响应式原理

 

- 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue

  将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属

  性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法

  shim（降级）的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

 

三、 Vue3.X 响应式原理

 

- 使用 Proxy 监听对象，而非属性，性能比 defineProperty 好。

 

四、 发布订阅模式

 

- 我们假设，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”publish

  一个信号，其他任务可以向信号中心“订阅”subscribe 这个信号，从而知道自己什么

  时候可以开始执行。这个就叫“发布/订阅模式”publish-subscribe pattern

 

五、观察者模式

 

- 观察者 Watcher

- 目标 Dep

  - subs 数组：储存所有观察者

  - addSub()：添加观察者

  - notify()：当事件发生，调用所有观察者的 update()方法

- 没有事件中心

 

六、虚拟 DOM

 

- 手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有 jQuery 等库简化 DOM 操作，

  但是随着项目的复杂，DOM 操作复杂提升

 

- 为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架，MVVM 框架解决了视图和状态的同步问题，

  为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，

  于是 Virtual DOM 出现了

 

- Virtual DOM 的好处是当状态改变时不需要立即更新 DOM，只需要创建一个虚拟树来描述 DOM，

  Virtual DOM 内部将弄清楚如何有效(diff)的更新 DOM

 

- 参考 github 上 virtual-dom 的描述:

  - 虚拟 DOM 可以维护程序的状态，跟踪上一次的状态

  - 通过比较前后两次状态的差异更新真实 DOM

 

七、虚拟 DOM 的作用

 

- 维护视图和状态的关系

 

- 复杂视图情况下提升渲染性能

 

- 除了渲染 DOM 以外，还可以实现 SSR（Nuxt.js/Next.js），原生应用（Weex/React Native），小程序等