面试题：什么是双向绑定？Vue 双向绑定的原理是什么？

什么是双向绑定？

双向绑定（Two-way Data Binding）是指视图（View）和数据模型（Model）之间的双向同步。当数据模型发生变化时，视图会自动更新；当用户操作视图时，数据模型也会自动更新。

在 Vue 中，双向绑定通常通过 v-model 指令实现。例如：

<input v-model="message" />
<p>{{ message }}</p>

当用户在输入框中输入内容时，message 会自动更新。
当 message 的值发生变化时，输入框的内容和 <p> 标签的内容也会自动更新。

Vue 双向绑定的原理

Vue 的双向绑定是通过 数据劫持（Data Observation） 和 发布-订阅模式（Publish-Subscribe Pattern） 实现的。具体来说，Vue 使用了以下技术：

1. 数据劫持（Data Observation）

Vue 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的 getter 和 setter，从而监听数据的变化。

Vue 2 的实现：
- 使用 Object.defineProperty 递归遍历数据对象的属性，将其转换为 getter 和 setter。
- 当访问数据时，触发 getter；当修改数据时，触发 setter，并通知依赖更新。
Vue 3 的实现：
- 使用 Proxy 代理整个对象，监听对象的所有操作（如读取、修改、删除等）。
- Proxy 的性能更好，且支持监听数组和动态添加的属性。

2. 发布-订阅模式（Publish-Subscribe Pattern）

Vue 通过 依赖收集 和 派发更新 实现视图和数据的同步。

依赖收集：
- 在组件渲染过程中，Vue 会创建一个 Watcher 实例，用于监听数据的变化。
- 当访问数据时，getter 会被触发，将当前的 Watcher 添加到依赖列表中。
派发更新：
- 当数据发生变化时，setter 会被触发，通知所有依赖的 Watcher 更新视图。

3. 模板编译

Vue 将模板编译为渲染函数，渲染函数会生成虚拟 DOM，并通过虚拟 DOM 更新真实 DOM。

在编译过程中，Vue 会解析 v-model 指令，生成对应的 getter 和 setter 逻辑。
例如，v-model 会生成一个 input 事件监听器，当用户输入时，更新数据模型。

Vue 双向绑定的实现步骤

数据劫持：
- 使用 Object.defineProperty 或 Proxy 监听数据的变化。
依赖收集：
- 在组件渲染时，创建 Watcher 实例，并将 Watcher 添加到依赖列表中。
派发更新：
- 当数据变化时，通知所有依赖的 Watcher 更新视图。
模板编译：
- 将模板编译为渲染函数，生成虚拟 DOM，并更新真实 DOM。

示例：Vue 2 的双向绑定实现

以下是一个简化版的 Vue 2 双向绑定实现：

class Vue {
  constructor(options) {
    this.$options = options;
    this._data = options.data;
    this.observe(this._data); // 数据劫持
    this.compile(options.el); // 模板编译
  }

  observe(data) {
    Object.keys(data).forEach(key => {
      let value = data[key];
      const dep = new Dep(); // 依赖列表

      Object.defineProperty(data, key, {
        get() {
          if (Dep.target) {
            dep.addSub(Dep.target); // 依赖收集
          }
          return value;
        },
        set(newValue) {
          if (newValue !== value) {
            value = newValue;
            dep.notify(); // 派发更新
          }
        },
      });
    });
  }

  compile(el) {
    const element = document.querySelector(el);
    this.compileNode(element);
  }

  compileNode(node) {
    if (node.nodeType === 1) { // 元素节点
      const attrs = node.attributes;
      Array.from(attrs).forEach(attr => {
        if (attr.name === 'v-model') {
          const key = attr.value;
          node.value = this._data[key]; // 初始化视图
          node.addEventListener('input', e => {
            this._data[key] = e.target.value; // 更新数据
          });
        }
      });
    } else if (node.nodeType === 3) { // 文本节点
      const text = node.textContent;
      const reg = /\{\{(.*?)\}\}/g;
      if (reg.test(text)) {
        const key = RegExp.$1.trim();
        node.textContent = this._data[key]; // 初始化视图
        new Watcher(this._data, key, value => {
          node.textContent = value; // 更新视图
        });
      }
    }

    if (node.childNodes) {
      node.childNodes.forEach(child => this.compileNode(child));
    }
  }
}

class Dep {
  constructor() {
    this.subs = []; // 依赖列表
  }

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

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

class Watcher {
  constructor(data, key, callback) {
    this.key = key;
    this.callback = callback;
    Dep.target = this; // 设置当前 Watcher
    data[key]; // 触发 getter，收集依赖
    Dep.target = null; // 重置
  }

  update() {
    this.callback(this.key);
  }
}

// 使用示例
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
  },
});

总结

双向绑定：视图和数据模型之间的双向同步。
Vue 的实现原理：
1. 数据劫持（Object.defineProperty 或 Proxy）。
2. 发布-订阅模式（依赖收集和派发更新）。
3. 模板编译（生成虚拟 DOM 并更新真实 DOM）。
Vue 2 和 Vue 3 的区别：
- Vue 2 使用 Object.defineProperty。
- Vue 3 使用 Proxy，性能更好且支持更多特性。

通过理解双向绑定的原理，可以更好地掌握 Vue 的核心机制，并优化应用的性能。

THE END

Vue 进阶面试题
# Vue 原理