vue的响应式数据更新机制

我们要对Vue 的响应式系统有很好的理解，要提到了几个重要的核心部件：Observer、Dep、Watcher 和 Scheduler。接下来，我将更详细地阐述它们的作用和相互协作的原理，以及 Vue 响应式系统如何通过它们实现高效的组件更新。

1. Observer：数据劫持与响应式转换

Observer 的主要职责是将普通对象转换为响应式对象。Vue 通过 Observer 遍历每个对象的属性，并使用 Object.defineProperty() （Vue 2.x）或 Proxy（Vue 3.x）为每个属性添加 getter 和 setter。

• getter：当属性被访问时，Vue 可以通过这个 getter 知道该属性已经被访问，并可以记录它是某个 Watcher 的依赖。
• setter：当属性被修改时，setter 会触发属性值的更新，并通过依赖收集器 Dep 通知相关的 Watcher，使得依赖这个属性的组件重新渲染。

举例说明 Object.defineProperty() 的作用：

let data = { message: 'Hello' };

Object.defineProperty(data, 'message', {
  get() {
    console.log('getter called');
    return message;
  },
  set(newVal) {
    console.log('setter called');
    message = newVal;
    // 触发更新逻辑
  }
});

data.message; // 输出：getter called
data.message = 'Vue'; // 输出：setter called

通过这种方式，Observer 为每个属性添加了控制，可以在属性访问或变更时做一些额外的处理。

2. Dep：依赖收集与通知

Dep 是依赖收集器，它负责将依赖于某个数据属性的 Watcher 收集起来。当数据发生变化时，Dep 会通知所有依赖的 Watcher，从而触发相关组件的重新渲染。

每个被观察的属性都会有一个对应的 Dep 实例，Dep 的作用分为两个阶段：

1. 依赖收集：当某个属性的 getter 被访问时，当前活跃的 Watcher（即当前组件的渲染逻辑）会被添加到该属性的 Dep 中。
2. 通知更新：当属性的 setter 被触发时，Dep 会通知所有依赖这个属性的 Watcher 进行更新。

3. Watcher：观察者

Watcher 是 Vue 响应式系统中关键的观察者，它会订阅（依赖）某些数据属性，并在这些数据属性发生变化时执行更新操作。

Watcher 的核心功能包括：

• 依赖收集：在组件渲染过程中，Watcher 会被激活，并通过访问数据属性的 getter，将这些依赖的数据属性记录下来。
• 变化检测与更新：当某个数据属性的 setter 触发时，Dep 会通知对应的 Watcher，从而执行 update() 方法来触发重新渲染。

一个典型的 Watcher 过程如下：

1. 初始化时，Watcher 会执行回调函数（如 render），此时会触发数据属性的 getter，从而将自己添加为依赖。
2. 当依赖的数据属性发生变化时，Watcher 会接收到通知，并调用 update() 方法。
3. update() 方法会调度一次渲染，更新视图。

4. Scheduler：调度更新

在 Vue 中，每次数据变化后，Watcher 的 update() 方法不会直接触发渲染，而是通过调度器 Scheduler 进行批量处理。这样做是为了避免频繁的 DOM 更新，保证性能。

Scheduler 的核心作用是异步更新机制，当多个属性在同一时刻发生变化时，Vue 会将这些变化合并处理，而不是每次变化都立即更新视图。具体来说，Scheduler 会把所有需要更新的 Watcher 推入一个队列中，并在下一个事件循环中执行一次批量更新。

5. 完整的响应式流程

让我们通过一个完整的流程来理解 Vue 响应式系统中各个部分的协作：

1. 初始化阶段：

   • 当我们创建一个 Vue 实例并定义 data 时，Observer 对 data 进行响应式处理。每个属性通过 Object.defineProperty() 或 Proxy 实现数据劫持，添加 getter 和 setter。
   • 初始化渲染时，Watcher（渲染函数）被创建，并开始执行，读取模板中绑定的数据属性，触发这些属性的 getter，从而把当前的 Watcher 添加到这些属性的 Dep 中，完成依赖收集。

2. 依赖收集阶段：

   • 每个被访问的数据属性都会将当前的 Watcher 注册为依赖，Dep 用于管理这些依赖。

3. 数据变更阶段：

   • 当某个数据属性发生变化时，触发该属性的 setter，此时对应的 Dep 会通知所有依赖该属性的 Watcher。

4. 更新阶段：

   • 受影响的 Watcher 收到通知后，调用 update() 方法，update() 方法会通过 Scheduler 将更新任务推入异步队列中。

5. 异步批量更新：

   • 在异步队列执行的下一个事件循环中，Scheduler 执行所有推入队列的 Watcher 的回调函数，触发渲染更新。

6. 代码示例

以下是一个简单的例子，展示 Vue 的响应式系统如何在后台工作：

let data = {
  message: 'Hello Vue!'
};

// 1. 数据响应式处理（Observer）
Object.defineProperty(data, 'message', {
  get() {
    console.log('getter: accessing message');
    return message;
  },
  set(newVal) {
    console.log('setter: setting message');
    message = newVal;
    // 通知依赖的 Watcher 更新
    dep.notify();
  }
});

// 2. 依赖收集（Dep 和 Watcher）
class Watcher {
  constructor(renderFn) {
    this.renderFn = renderFn;
    this.get();
  }

  get() {
    Dep.target = this;  // 当前 Watcher
    this.renderFn();    // 触发 getter
    Dep.target = null;
  }

  update() {
    console.log('Watcher: update view');
    this.renderFn();
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(watcher) {
    this.subs.push(watcher);
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

let dep = new Dep();

// 3. 创建 Watcher，模拟渲染过程
new Watcher(() => {
  console.log('Render: ' + data.message);
});

// 4. 修改数据，触发更新
data.message = 'Hello World!';  // 会触发 Watcher 的 update 方法，重新渲染

总结

• Observer：将普通对象转换为响应式对象，劫持属性的 getter 和 setter。
• Dep：依赖管理器，负责依赖收集和通知更新。
• Watcher：观察者，记录依赖并在数据变化时执行更新操作。
• Scheduler：调度器，批量处理更新，保证性能。

通过这些核心部件，Vue 实现了高效的响应式数据更新机制。