vue双向绑定如何实现

Vue 双向绑定的实现原理

Vue 的双向绑定是通过 v-model 指令实现的，其核心是结合了数据绑定和事件监听。具体实现分为以下几个部分：

数据劫持（响应式系统）

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

// Vue 2 的数据劫持示例
const data = { value: '' };
Object.defineProperty(data, 'value', {
  get() {
    return this._value;
  },
  set(newVal) {
    this._value = newVal;
    // 触发视图更新
    updateView();
  }
});

模板编译

Vue 将模板编译为渲染函数，解析 v-model 指令并生成对应的数据绑定和事件监听代码。例如：

<input v-model="message">

会被编译为：

{
  render() {
    return _c('input', {
      domProps: { value: this.message },
      on: {
        input: ($event) => { this.message = $event.target.value; }
      }
    });
  }
}

事件监听

v-model 会根据表单元素的类型自动监听对应的事件（如 input、change），并将输入的值同步到数据中。

实现自定义双向绑定

可以通过以下方式手动实现类似 v-model 的功能：

使用 :value 和 @input

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

自定义组件实现双向绑定

在组件中，可以通过 model 选项和 $emit 实现双向绑定：

// 子组件
Vue.component('custom-input', {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  },
  template: `
    <input 
      :value="value" 
      @input="$emit('input', $event.target.value)"
    >
  `
});

使用 .sync 修饰符（Vue 2）

<custom-input :value.sync="message"></custom-input>

子组件通过 $emit('update:value', newValue) 触发更新。

Vue 3 的双向绑定改进

Vue 3 使用 Proxy 实现响应式，并支持多个 v-model 绑定：

<custom-input v-model:first="first" v-model:second="second"></custom-input>

子组件通过 emit('update:first', value) 更新数据。

总结

Vue 的双向绑定本质是语法糖，结合了数据属性的响应式更新和事件监听。通过理解其底层机制，可以灵活实现自定义的双向绑定逻辑。