vue 双向实现原理

Vue 双向绑定的实现原理

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

数据劫持

Vue 2.x 使用 Object.defineProperty 劫持对象的属性，Vue 3.x 改用 Proxy 代理整个对象。当数据发生变化时，触发 setter 或 Proxy 的捕获器，通知依赖更新。

Vue 2.x 示例：

let data = { value: '' };
Object.defineProperty(data, 'value', {
  get() {
    return this._value;
  },
  set(newVal) {
    this._value = newVal;
    console.log('数据更新了'); // 触发视图更新
  }
});

Vue 3.x 示例：

let data = { value: '' };
let proxy = new Proxy(data, {
  set(target, key, value) {
    target[key] = value;
    console.log('数据更新了'); // 触发视图更新
    return true;
  }
});

发布-订阅模式

1. 依赖收集：在编译模板时，解析 v-model 指令，为表单元素（如 input）绑定事件监听（如 input 事件）。
2. 通知更新：当数据变化时，触发 setter/Proxy，通知所有订阅该数据的 Watcher 更新视图。

简单实现：

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

let dep = new Dep();
let target = null;

function watcher(fn) {
  target = fn;
  dep.depend();
  fn();
  target = null;
}

v-model 的工作流程

1. 模板编译：将 v-model="message" 解析为 :value="message" 和 @input="message = $event.target.value"。
2. 数据绑定：表单元素的值与数据属性 message 动态关联。
3. 事件监听：用户输入时触发 input 事件，更新数据属性，进而触发视图重新渲染。

示例代码：

<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">

不同表单元素的适配

• `：绑定 value 属性和 input 事件。
• <checkbox>：绑定 checked 属性和 change 事件。
• <select>：绑定 value 属性和 change 事件。

Vue 内部会根据元素类型自动选择对应的属性和事件。

总结

Vue 的双向绑定本质是语法糖，通过数据劫持监听数据变化，结合发布-订阅模式实现视图与数据的自动同步。v-model 简化了手动绑定值和事件的代码，提升开发效率。