vue 的双向绑定是怎么实现的

Vue.js 是一个渐进式 JavaScript 框架，以其简洁高效的数据绑定机制广受欢迎。在 Vue 2 中，双向绑定的实现依赖于数据劫持和发布-订阅模式，保证了数据和视图的自动同步。本文将详细解析 Vue 2 的双向绑定是如何工作的，并揭示其背后的核心机制。

什么是双向绑定？

双向绑定指的是视图和数据模型之间的自动同步：当数据变化时，视图会自动更新；当用户通过视图修改数据时，数据模型也会随之更新。Vue 2 通过 v-model 指令提供了这种双向绑定的便捷性。然而，其背后的原理更为复杂而精妙。

Vue 2 的数据劫持

Vue 2 的核心在于它的响应式系统，这一系统通过数据劫持来实现。Vue 使用了 Object.defineProperty 方法，为数据对象的每个属性添加了 getter 和 setter，从而劫持对这些属性的访问和修改操作。

数据初始化

当你在 Vue 实例中定义数据时，Vue 会遍历这个数据对象的每一个属性，并使用 Object.defineProperty 为它们设置 getter 和 setter。这样，每当这些属性被访问或修改时，Vue 都能介入进行处理。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 数据读取时的处理逻辑
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 数据变化时的处理逻辑
    },
  });
}

在这个示例中，defineReactive 方法为对象 obj 的属性 key 定义了 getter 和 setter。getter 负责在属性被读取时执行特定操作，而 setter 则在属性值被修改时触发更新逻辑。

发布-订阅模式

Vue 2 的双向绑定还依赖于发布-订阅模式来管理依赖关系和更新视图。每个数据字段都关联着一个依赖管理器（Dep），它负责追踪所有依赖于该数据的组件，并在数据变化时通知它们更新。

依赖收集

当组件渲染时，Vue 会访问数据对象的属性，这会触发 getter。此时，Vue 将当前的渲染函数（或计算属性等）作为一个订阅者，添加到对应的依赖管理器中。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach((sub) => sub.update());
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get: function () {
      // 将依赖收集到当前属性的依赖管理器中
      dep.addSub(Dep.target);
      return val;
    },
    set: function (newVal) {
      if (newVal === val) return;
      val = newVal;
      // 通知所有依赖更新视图
      dep.notify();
    },
  });
}

在这里，每个属性的依赖管理器 dep 会在数据读取时收集依赖（通常是渲染函数），并在数据更新时通过 notify 方法通知所有订阅者更新视图。

Vue 的模板更新机制

当数据发生变化时，Vue 通过其 Virtual DOM（虚拟 DOM）机制，找到需要更新的视图部分，并高效地更新这些部分的 DOM。这个过程是自动进行的，开发者无需手动干预，只需专注于数据和逻辑的编写。

总结

Vue 2 的双向绑定通过数据劫持和发布-订阅模式，实现了数据与视图的自动同步。Object.defineProperty 是其核心工具，它为每个属性提供了精细的读写控制；同时，依赖管理器负责追踪和通知依赖，确保数据变化能及时反映在视图中。正是这种响应式系统的设计，使得 Vue 2 成为开发现代 Web 应用的强大框架之一。