vue实现双向绑定的是

Vue 实现双向绑定的原理

Vue 的双向绑定主要通过 v-model 指令实现，其核心是基于数据劫持和发布-订阅模式。以下是关键实现机制：

数据劫持（响应式系统）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的访问和修改。当数据变化时，触发依赖的更新。

• Vue 2 示例：

  Object.defineProperty(obj, key, {
    get() { return value; },
    set(newVal) {
      value = newVal;
      dep.notify(); // 通知订阅者更新
    }
  });

• Vue 3 示例：

  new Proxy(data, {
    get(target, key) { return target[key]; },
    set(target, key, value) {
      target[key] = value;
      trigger(key); // 触发更新
    }
  });

模板编译与指令解析

Vue 将模板编译为渲染函数，解析 v-model 指令时：

1. 对表单元素（如 input、select）绑定 value 属性和 input 事件。
2. 非表单元素通过自定义事件和 props 实现类似逻辑。

发布-订阅模式

依赖收集器（Dep）和观察者（Watcher）协作：

• 渲染时触发 getter，收集当前 Watcher 为依赖。
• 数据修改时触发 setter，通知所有 Watcher 更新视图。

v-model 的实现

本质是语法糖，等价于：

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

自定义组件的双向绑定

通过 model 选项指定 prop 和事件：

export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  methods: {
    handleChange() {
      this.$emit('change', newValue);
    }
  }
}

对比 Vue 2 与 Vue 3

• Vue 2：基于 Object.defineProperty，无法检测数组索引变化和对象新增属性。
• Vue 3：改用 Proxy，支持深层响应式和更多数据操作类型。

通过以上机制，Vue 实现了数据变化自动更新视图、视图输入自动同步数据的高效双向绑定。