vue实现双向绑定的是

Vue 实现双向绑定的原理

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

数据绑定（Data Binding）
v-model 默认将表单元素（如 input、select）的 value 属性与 Vue 实例中的数据属性绑定。当数据变化时，视图自动更新。

事件监听（Event Listening）
v-model 监听表单元素的输入事件（如 input 事件），在用户操作时同步更新数据。不同元素对应不同事件：

• 文本输入框（<input type="text">）：监听 input 事件。
• 复选框（<input type="checkbox">）：监听 change 事件并处理 checked 属性。
• 单选按钮（<input type="radio">）：监听 change 事件并处理 value 属性。

底层实现：Object.defineProperty 或 Proxy

Vue 2.x 使用 Object.defineProperty 对数据对象的属性进行劫持，通过 getter 和 setter 实现响应式。Vue 3.x 改用 Proxy，覆盖整个对象并支持动态新增属性。

// Vue 2.x 的响应式原理示例
const data = { value: '' };
Object.defineProperty(data, 'value', {
  get() { return this._value; },
  set(newVal) {
    this._value = newVal;
    console.log('数据更新，触发视图渲染');
  }
});

自定义组件的双向绑定

在自定义组件中，v-model 默认绑定 value 属性和 input 事件。可通过 model 选项修改默认行为（Vue 2.x）或使用 v-model 的参数（Vue 3.x）：

// Vue 2.x 自定义组件
export default {
  model: {
    prop: 'checked',  // 将默认的 `value` 改为 `checked`
    event: 'change'   // 将默认的 `input` 事件改为 `change`
  },
  props: ['checked'],
  methods: {
    handleChange() {
      this.$emit('change', newValue);
    }
  }
}

Vue 3.x 的改进

Vue 3.x 支持多个 v-model 绑定，并通过 v-model:argument 指定具体属性：

<CustomComponent v-model:title="pageTitle" v-model:content="pageContent" />

对应的组件需显式声明 props 和 update 事件：

props: ['title', 'content'],
emits: ['update:title', 'update:content']

总结

双向绑定的本质是语法糖，结合了属性绑定和事件监听。底层依赖响应式系统，通过数据劫持或代理实现自动更新。