vue底层实现双向绑定

Vue 双向绑定的底层实现原理

Vue 的双向绑定主要通过数据劫持结合发布-订阅模式实现，核心是 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）。以下是具体实现机制：

数据劫持（Data Observation）

Vue 2.x 使用 Object.defineProperty：

• 遍历数据对象的属性，通过 Object.defineProperty 重写属性的 getter 和 setter。
• 在 getter 中收集依赖（订阅者），在 setter 中通知依赖更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`更新 ${key}，新值: ${newVal}`);
        val = newVal;
      }
    }
  });
}

Vue 3.x 使用 Proxy：

• 直接代理整个对象，无需遍历属性，性能更高。
• 通过 get 和 set 拦截器实现依赖收集和触发更新。

const proxy = new Proxy(obj, {
  get(target, key) {
    console.log(`读取 ${key}`);
    return target[key];
  },
  set(target, key, value) {
    if (target[key] !== value) {
      console.log(`更新 ${key}，新值: ${value}`);
      target[key] = value;
    }
    return true;
  }
});

依赖收集（Dependency Tracking）

• Dep 类：每个响应式属性对应一个 Dep 实例，用于管理所有订阅者（Watcher）。
• Watcher 类：订阅数据变化的观察者，当数据更新时触发回调（如更新视图）。

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target);
    }
  }
  notify() {
    this.subscribers.forEach(sub => sub());
  }
}

模板编译（Template Compilation）

• 解析模板：将模板中的指令（如 v-model）解析为数据绑定和事件监听。
• 生成渲染函数：将模板转换为虚拟 DOM 的渲染函数。

<input v-model="message">

编译后等效于：

<input :value="message" @input="message = $event.target.value">

更新视图（View Update）

• 数据变化时，触发 setter 中的 dep.notify()，通知所有 Watcher 执行更新。
• Watcher 调用渲染函数生成新的虚拟 DOM，通过 Diff 算法对比并更新真实 DOM。

双向绑定的实现流程

1. 初始化阶段：

   • 数据劫持：将 data 对象转为响应式。
   • 模板编译：解析指令，生成渲染函数。

2. 依赖收集阶段：

   • 首次渲染时触发 getter，将当前 Watcher 添加到 Dep 中。

3. 更新阶段：

   • 数据变化触发 setter，调用 dep.notify()。
   • Watcher 重新执行渲染函数，更新视图。

总结

Vue 的双向绑定通过以下技术实现：

• 数据劫持：监听数据变化（Object.defineProperty 或 Proxy）。
• 依赖收集：管理数据与视图的依赖关系（Dep 和 Watcher）。
• 模板编译：将模板转换为可执行的渲染逻辑。
• 异步更新：通过队列优化多次数据变更的渲染性能。