vue实现双向绑定

Vue 双向绑定的实现原理

Vue 的双向绑定主要通过 v-model 指令实现，底层基于数据劫持和发布-订阅模式。核心是结合 Object.defineProperty（Vue 2）或 Proxy（Vue 3）监听数据变化，并同步更新视图。

Vue 2 的实现方式

数据劫持
通过 Object.defineProperty 劫持对象的属性，在属性被访问或修改时触发 getter 和 setter：

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

发布-订阅模式

1. Dep 类：收集依赖（Watcher），通知更新。
2. Watcher 类：监听数据变化，触发回调更新视图。

Vue 3 的实现方式

Vue 3 使用 Proxy 替代 Object.defineProperty，支持深层对象监听和数组变化检测：

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

v-model 的实现示例

v-model 是语法糖，本质是 :value 和 @input 的组合：

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

自定义组件中的 v-model
在 Vue 2 中需显式定义 value 和 input 事件：

export default {
  props: ['value'],
  methods: {
    updateValue(newVal) {
      this.$emit('input', newVal);
    }
  }
};

Vue 3 支持自定义 modelValue 和 update:modelValue：

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(newVal) {
      this.$emit('update:modelValue', newVal);
    }
  }
};

响应式系统的核心流程

1. 初始化阶段：遍历数据对象，通过劫持或代理建立响应式依赖。
2. 编译阶段：解析模板指令，创建订阅者（Watcher）。
3. 更新阶段：数据变化时触发 setter 或 Proxy 的拦截，通知 Watcher 更新视图。

注意事项

• 性能优化：避免深层嵌套对象，或使用 Object.freeze() 跳过响应式处理。
• 数组监听：Vue 2 需通过重写数组方法（如 push、splice）实现响应式。
• Proxy 的优势：Vue 3 的 Proxy 可直接监听数组和对象的新增/删除属性。