Vue 是如何实现数据双向绑定的？-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

前言

Vue.js 核心特性之一是数据双向绑定（Two-way Data Binding），这一特性不仅简化了开发者与数据交互的过程，还大大提升了开发效率和用户体验。那么在 Vue.js 的内部机制中，数据双向绑定究竟是如何实现的呢？
本文将详细探讨 Vue.js 是如何通过数据劫持、发布-订阅模式以及虚拟 DOM 技术，实现高效的数据双向绑定的。

什么是数据双向绑定？

在前端开发中，数据绑定是指将数据模型（Model）和视图（View）同步的过程。数据双向绑定则意味着，当数据模型改变时，视图会自动更新；反之，当视图中的数据发生改变时，数据模型也会随之更新。

在 Vue.js 中，这一功能主要通过 v-model 指令来实现。通过 v-model，我们可以轻松地将表单元素与数据模型绑定，如下所示：

<input v-model="message" placeholder="Type something">
<p>The message is: {{ message }}</p>

在上面的例子中，输入框和段落中的文本会保持同步，无论你在输入框中输入什么，段落中的文本都会立即更新，反之亦然。

双向绑定的原理

Vue.js 实现数据双向绑定主要依赖于以下几个关键技术：

数据劫持（Data Hijacking）：通过 Object.defineProperty() 劫持对象属性的 getter 和 setter 方法。
发布-订阅模式（Pub-Sub Pattern）：通过事件系统来通知数据变化。
虚拟 DOM（Virtual DOM）：高效地对 DOM 进行操作和更新。

数据劫持

Vue.js 通过数据劫持来监听数据的变化。这是通过 Object.defineProperty() 方法来实现的。这个方法允许我们在给对象的某个属性设置值的时候，执行特定的代码。简而言之，它可以让我们在值被获取或修改时，执行一些自定义的逻辑。

let data = {};
Object.defineProperty(data, 'message', {
  get() {
    console.log('Getting value');
    return value;
  },
  set(newValue) {
    console.log('Setting value');
    value = newValue;
    // 通知订阅者数据变化
  }
});

每当我们尝试获取或修改 data.message 时，都会触发 get 或 set 方法，这样我们就可以在数据变化时做一些额外的操作。

发布-订阅模式

在 Vue.js 中，数据劫持只是实现数据绑定的一部分。为了让视图能够响应数据的变化，Vue.js 采用了发布-订阅模式。在这种模式下，当数据发生变化时，会通知所有订阅该数据的视图进行更新。

Vue.js 通过一个叫做 Dep 的类来实现这一功能。Dep 是一个依赖收集器，用于收集依赖于某个数据的所有视图，当数据变化时，通知这些视图进行更新。

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

  addSubscriber(sub) {
    this.subscribers.push(sub);
  }

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

每当数据变化时，Dep 会调用 notify 方法，通知所有的订阅者更新视图。

虚拟 DOM

为了高效地操作和更新 DOM，Vue.js 使用了虚拟 DOM 技术。虚拟 DOM 是对真实 DOM 的一种抽象表示，当数据发生变化时，Vue.js 会先在虚拟 DOM 中进行计算和比较，找出最小的变更，然后再将这些变更应用到真实的 DOM 中。
这样做的好处是，避免了直接操作真实 DOM 带来的性能问题，使得页面更新更加高效和流畅。

深入探讨：Observer 和 Watcher

除了上述提到的核心技术，Vue.js 还引入了两个重要的概念：Observer 和 Watcher。这两个概念在 Vue.js 的数据双向绑定机制中扮演了重要的角色。

Observer

Observer 是 Vue.js 中用于劫持数据的核心类。它会递归地遍历数据对象的每个属性，并利用 Object.defineProperty 为这些属性添加 getter 和 setter，从而实现对数据变化的监听。

class Observer {
  constructor(value) {
    this.walk(value);
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep();
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      Dep.target && dep.addSubscriber(Dep.target);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

在上面的代码中，当我们访问或修改对象的属性时，getter 和 setter 会被触发，从而实现对数据变化的监听和通知。

Watcher

Watcher 是 Vue.js 中用于更新视图的核心类。当数据变化时，它负责触发视图的更新。每个 Watcher 会订阅它依赖的数据，当这些数据发生变化时，Watcher 会收到通知并执行相应的更新操作。

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

  get() {
    Dep.target = this;
    const value = this.getter.call(this.vm, this.vm);
    Dep.target = null;
    return value;
  }

  update() {
    const newValue = this.get();
    const oldValue = this.value;
    this.value = newValue;
    this.cb.call(this.vm, newValue, oldValue);
  }
}

每当数据变化时，Watcher 会调用 update 方法，从而更新视图。这样，当某个数据改变时，所有依赖于该数据的视图都会被更新。

使用 Proxy 进行数据劫持

虽然 Object.defineProperty 方法已经非常强大，但它有一个局限性：只能劫持已有属性，不能监听新增属性和删除属性。从 Vue 3 开始，Vue.js 引入了 Proxy 对象来替代 Object.defineProperty，从而解决这些问题。

Proxy 可以直接代理整个对象，并且不仅可以监听属性的读写，还可以监听属性的添加和删除。

const handler = {
  get(target, key) {
    // 依赖收集
    Dep.target && dep.addSubscriber(Dep.target);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    // 通知订阅者
    dep.notify();
    return true;
  }
};

const proxy = new Proxy(data, handler);

通过 Proxy，我们可以更灵活地监听对象的变化，并且代码更加简洁和强大。

实践经验

在实际开发中，了解 Vue.js 数据双向绑定的工作原理有助于我们编写更高效、可维护的代码。以下是一些最佳实践：

避免在复杂对象中嵌套过多层次：虽然 Vue.js 可以递归监听对象的属性变化，但在嵌套层次过多的情况下，性能可能会受到影响。
使用 Vuex 管理状态：对于复杂的应用，建议使用 Vuex 来集中管理应用的状态，从而避免数据流混乱。
合理使用计算属性和侦听器：计算属性和侦听器可以帮助我们高效地处理数据变化，避免不必要的视图更新。

总结

通过对 Vue.js 数据双向绑定实现原理的深入解析，我们可以看到这一机制背后的复杂性与巧妙设计。Vue.js 通过 Observer 和 Watcher 类，结合 Object.defineProperty 或 Proxy，实现了高效而灵活的数据绑定。在这一过程中，发布-订阅模式和虚拟 DOM 技术发挥了至关重要的作用。

Vue 是如何实现数据双向绑定的？

前言