VUE2.0如何追踪数据变化？

娜姐

发布于 2022-05-13 14:36:17

1.2K0

发布于 2022-05-13 14:36:17

文章被收录于专栏：娜姐聊前端

我们知道Vue.js和angular(特指vue 2.0和angular 1)，都实现了数据双向绑定。而为了支持双向绑定，就必须时刻追踪数据变化并及时响应到UI上，反之亦然。

Angular 1 中，采用脏检查机制，缺点是：当watcher越来越多时，作用域内每一次变化，所有watcher都要重新计算。如果一些watcher引发了另外的更新，那么，digest cycle 可能要运行多次。一般来说，不建议在一个页面上绑定大于1000个watcher。

Vue采用更加优雅的方式来解决：数据劫持+发布订阅者模式。

1. 数据劫持

Vue通过Object.defineProperty()设置对象的存储器属性，即set和get。这样可以拦截数据，做一些额外的事情。比如设置/更新时，添加对该属性感兴趣的订阅者；读取属性时，通知关系该属性的订阅者更新数据。

2. 发布订阅者模式

先看官网上的一张图（来自：https://vuefe.cn/v2/guide/reactivity.html）：

data.png

主要分为四部分：

Data：也就是数据属性观察者(observer)，它劫持属性变化，并负责
- 添加订阅者(watcher)到订阅者容器(Dependency)
- 数据改变时，通知订阅者容器发布更新通知。
Dependency：一个订阅者容器，负责维护watcher，并通知watcher做更新操作。
Watcher：某个属性数据的监听者/订阅者，一旦数据有变化，它会通知指令(directive)重新编译模板并渲染UI。
Directive(Component Render Function)：指令负责将model和DOM关联起来，在watcher触发下，它可以根据最新的数据重新编译模板，并最终重绘UI（vue2.0在重绘DOM时，采用虚拟DOM树机制，用最小的开销更新UI）。

下面是一张更加详细的剖析图(图内的方法名只作为示例)：

vue-data.png

从上图可以更清楚的看到：

每个指令都对应一个watcher（在编译指令时，就会初始化这个watcher）。一旦调用watcher.update()，即会通知指令重新编译模板。
Dep对象维护了一个watcher array。
数据对象的每个属性，都包含一个Dep实例对象，用于存储关心该属性变化的watchers。
在model--->UI渲染过程中，通过数据属性的get函数，可以添加相对应的watcher到Dep对象中。
当触发UI更新操作（比如，input框输入某些内容），即UI--->Model--->UI这个过程中，首先触发对应数据属性的set函数，然后订阅者容器Dep对象发布消息通知notify，随后，所有订阅者watchers调用update()，从而通知模板编译器Directive Compiler对相应的指令进行重新编译，DOM重绘。

小贴士：
模板编译时，会把html模板编译成render函数。
所以，如果直接用render函数来创建组件html，编译速度会更快。

实例代码：https://github.com/DMQ/mvvm

3. 其他：异步更新队列

官方文档上，还提到了异步更新队列机制。也就是数据变化时，先缓冲watcher在当前事件循环中，并去掉重复数据（避免同一个watcher被多次触发）。然后，在下一次事件循环中(next tick)，再真正的更新DOM。

官网上的例子很清楚的解释了这个“延迟过程”：

HTML:
<div id="example">{{message}}</div>

JS:
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false 这个时候DOM节点还没更新
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true 在下一个Tick中，DOM节点才会更新
})