vue实现双向绑定

Vue 双向绑定的实现原理

Vue 的双向绑定是通过 v-model 指令实现的，其本质是语法糖，结合了 v-bind（属性绑定）和 v-on（事件监听）。以下是具体实现方式：

使用 v-model 实现表单元素双向绑定

在表单元素（如 input、textarea、select）上使用 v-model，可以自动将输入的值与 Vue 实例的数据属性绑定：

<template>
  <input v-model="message" placeholder="输入内容">
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

自定义组件的双向绑定

在自定义组件中实现双向绑定，需要显式定义 model 选项并触发 input 事件：

<template>
  <CustomInput v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    CustomInput: {
      props: ['value'],
      template: `
        <input 
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `
    }
  }
}
</script>

手动实现双向绑定（不使用 v-model）

通过 v-bind 和 v-on 手动实现等效功能：

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

修饰符的使用

v-model 支持修饰符来优化交互：

• .lazy：将 input 事件改为 change 事件（失焦后更新）
• .number：自动将输入转为数字类型
• .trim：自动去除首尾空格

<input v-model.lazy="message">

双向绑定的底层原理

Vue 2.x 使用 Object.defineProperty 实现数据劫持，结合发布-订阅模式：

1. 数据劫持：递归遍历 data 对象，为每个属性添加 getter/setter。
2. 依赖收集：在 getter 中收集依赖（Watcher）。
3. 派发更新：在 setter 中通知所有依赖进行更新。

Vue 3.x 改用 Proxy 实现，支持更全面的数据监听和更好的性能。