Vue 响应式原理剖析（下）

2024-02-19 17:38:50

响应式系统回顾

在上一篇文章中，我们介绍了 Vue.js 的响应式系统，了解了 Vue.js 是如何通过 props、data、watch 和 computed 等特性来实现数据的响应性。在本文中，我们将继续探索响应式系统是如何实现的。

实现原理

Object.defineProperty

Vue.js 使用 Object.defineProperty 来劫持对象的属性，当属性的值发生变化时，它会触发相应的回调函数。这个回调函数就是我们通常所说的 "侦听器"（watcher）。

const obj = {
  name: 'John'
};

Object.defineProperty(obj, 'name', {
  get() {
    return this.name;
  },
  set(newValue) {
    this.name = newValue;
    // 当 name 属性发生变化时，触发侦听器
    this.triggerWatchers();
  }
});

// 侦听器
obj.addWatcher(function(oldValue, newValue) {
  console.log('Name changed from', oldValue, 'to', newValue);
});

obj.name = 'Mary'; // 触发侦听器

在上面的例子中，我们使用 Object.defineProperty 来劫持 obj 对象的 name 属性。当 name 属性的值发生变化时，它会触发侦听器，并将旧值和新值传递给侦听器。

发布-订阅模式

Vue.js 使用发布-订阅模式来管理侦听器。当一个属性发生变化时，Vue.js 会向所有订阅了该属性的侦听器发送一条消息，通知它们属性的值发生了变化。

侦听器可以使用 Vue.watch() 方法来订阅属性的变化。例如：

const vm = new Vue({
  data: {
    name: 'John'
  }
});

vm.$watch('name', function(oldValue, newValue) {
  console.log('Name changed from', oldValue, 'to', newValue);
});

在上面的例子中，我们使用 vm.$watch() 方法来订阅 name 属性的变化。当 name 属性的值发生变化时，侦听器就会被触发，并将旧值和新值传递给侦听器。

依赖收集

Vue.js 使用依赖收集来跟踪每个属性的依赖项。当一个属性发生变化时，Vue.js 会收集所有依赖于该属性的侦听器。然后，它会向这些侦听器发送一条消息，通知它们属性的值发生了变化。

依赖收集可以通过多种方式来实现。Vue.js 使用了一种叫做 "脏检查" 的方法来实现依赖收集。脏检查是指，Vue.js 会在每次属性发生变化时，检查所有依赖于该属性的侦听器是否需要更新。如果需要更新，则将侦听器标记为 "脏"。然后，在下次更新视图时，Vue.js 会重新计算所有脏的侦听器。

更新视图

当 Vue.js 收到一个属性发生变化的消息时，它会重新计算所有依赖于该属性的侦听器。然后，它会将侦听器计算后的值更新到视图中。

更新视图可以通过多种方式来实现。Vue.js 使用一种叫做 "虚拟 DOM" 的方法来实现更新视图。虚拟 DOM 是一个 JavaScript 对象，它代表了视图的结构。当 Vue.js 更新视图时，它会创建一个新的虚拟 DOM，然后将新的虚拟 DOM 与旧的虚拟 DOM 进行比较。只有当两个虚拟 DOM 存在差异时，Vue.js 才会更新视图。