Vue.js如何实现数据双向绑定

Vue.js 实现数据双向绑定的核心是依赖收集和变化通知。Vue.js 使用了 Object.defineProperty() 方法来实现数据的 getter 和 setter，从而在数据发生变化时通知视图进行更新。以下是 Vue.js 实现数据双向绑定的基本步骤：

1. 数据劫持：Vue.js 在初始化实例时，会遍历 data 对象的所有属性，并使用 Object.defineProperty() 将它们转换为 getter 和 setter。这样，当数据被访问或修改时，Vue.js 就能够知道何时收集依赖以及何时触发更新。

function defineReactive(obj, key, val) {
  // 数据劫持
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 触发更新
      updateView();
    }
  });
}

2. 依赖收集：在 getter 中，Vue.js 使用一个全局的 Watcher 实例来收集依赖。当组件渲染时，会创建一个新的 Watcher 实例，并将其添加到当前组件的依赖列表中。这样，当数据发生变化时，Watcher 实例就会收到通知。

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    this.key = key;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this; // 设置当前的 Watcher 实例为依赖目标
    const value = this.vm[this.key]; // 触发 getter，收集依赖
    Dep.target = null; // 清除依赖目标
    return value;
  }

  update() {
    const oldValue = this.value;
    this.value = this.get(); // 获取新值
    this.cb.call(this.vm, this.value, oldValue); // 调用回调函数，更新视图
  }
}

3. 变化通知：在 setter 中，当数据发生变化时，Vue.js 会通知所有依赖于该数据的 Watcher 实例进行更新。这是通过调用 Watcher 实例的 update() 方法来实现的。

function updateView() {
  // 遍历所有依赖于该数据的 Watcher 实例，并调用它们的 update() 方法
  watchers.forEach(watcher => watcher.update());
}

4. 指令系统：Vue.js 的指令系统（如 v-model、v-bind 等）用于将数据绑定到 DOM 元素上。当数据发生变化时，指令系统会自动更新 DOM 元素以反映最新的数据。

<!-- 使用 v-model 实现双向绑定 -->
<input v-model="message" />

通过以上步骤，Vue.js 实现了数据的双向绑定。当数据发生变化时，视图会自动更新；当视图发生变化时，数据也会自动更新。这使得开发者能够更轻松地构建动态的 Web 应用程序。