vue 实现双向绑定

Vue 双向绑定实现原理

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

基础语法

在表单元素上使用 v-model 绑定数据：

<input v-model="message" />
<p>{{ message }}</p>

实现机制

1. 数据劫持
   Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）监听数据变化，当数据修改时触发视图更新。

   

2. 模板编译
   模板中的 v-model 会被编译为以下等效代码：

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

3. 自定义组件支持
   在自定义组件中实现双向绑定需显式定义 model 选项（Vue 2）或使用 v-model 参数（Vue 3）：

   // Vue 2
   export default {
     model: {
       prop: 'value',
       event: 'input'
     },
     props: ['value']
   }

   <!-- Vue 3 -->
   <CustomComponent v-model:title="pageTitle" />

修饰符

• .lazy：将 input 事件改为 change 事件触发更新。
• .number：自动将输入值转为数字类型。
• .trim：自动过滤首尾空格。

示例代码

// Vue 3 Composition API
import { ref } from 'vue';
export default {
  setup() {
    const text = ref('');
    return { text };
  }
}

注意事项

• 双向绑定仅适用于表单输入元素或自定义组件。
• 复杂对象属性需用 v-model:propName 语法单独绑定。
• Vue 3 的 v-model 默认使用 modelValue 作为 prop 名和 update:modelValue 作为事件名。