vue双向实现数据

Vue 双向数据绑定的实现原理

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

使用 v-model 指令

v-model 是语法糖，默认绑定 value 属性并监听 input 事件。例如在输入框中：

<input v-model="message">

等价于：

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

手动实现双向绑定

基于 Object.defineProperty

1. 数据劫持
   通过 Object.defineProperty 监听对象属性的读写：

   function observe(obj) {
     Object.keys(obj).forEach(key => {
       let value = obj[key];
       Object.defineProperty(obj, key, {
         get() {
           return value;
         },
         set(newVal) {
           value = newVal;
           console.log(`属性 ${key} 更新为 ${newVal}`);
         }
       });
     });
   }
   const data = { message: '' };
   observe(data);

2. 结合 DOM 事件
   手动绑定输入框的 input 事件和数据的更新：

   document.getElementById('input').addEventListener('input', (e) => {
     data.message = e.target.value;
   });

基于 Proxy（Vue 3 使用）

Proxy 可以监听整个对象而非单个属性：

const data = new Proxy({ message: '' }, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    console.log(`属性 ${key} 更新为 ${value}`);
    return true;
  }
});

自定义组件中的双向绑定

在自定义组件中，v-model 默认绑定 modelValue 并触发 update:modelValue 事件：

<CustomInput v-model="message" />

组件内部实现：

props: ['modelValue'],
emits: ['update:modelValue'],
template: `
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  >
`

双向绑定的核心流程

1. 数据变化驱动视图更新
   通过响应式系统监听数据变化，触发虚拟 DOM 的重新渲染。

2. 视图变化更新数据
   监听表单元素的输入事件（如 input、change），将最新值同步到数据层。

注意事项

• Vue 2 中使用 Object.defineProperty 对数组和对象的部分操作无法监听，需通过 Vue.set 处理。
• Vue 3 改用 Proxy 解决了上述限制，并提升了性能。