vue双向实现数据

Vue 双向数据绑定的实现

Vue 的双向数据绑定主要通过 v-model 指令实现，它结合了 v-bind 和 v-on 的功能，能够同步表单输入和应用状态。

基本语法

在表单元素上使用 v-model，绑定一个响应式数据：

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

实现原理

1. 数据劫持
   Vue 使用 Object.defineProperty 或 ES6 的 Proxy 拦截数据的读写操作，在数据变化时触发视图更新。

2. 发布-订阅模式
   每个组件实例对应一个 Watcher，当依赖的数据变化时，通知视图重新渲染。

   

3. 指令解析
   v-model 在编译阶段会被解析为 value 绑定和 input 事件监听的组合：

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

自定义组件实现

在自定义组件中实现 v-model 需要显式定义 model 选项：

export default {
  model: {
    prop: 'value',  // 绑定的属性名
    event: 'input'  // 触发的事件名
  },
  props: ['value']
}

使用时与原生元素一致：

<custom-input v-model="message"></custom-input>

修饰符

1. .lazy
   将 input 事件改为 change 事件，延迟同步：

   <input v-model.lazy="msg" />

2. .number
   自动将输入转为数字类型：

   <input v-model.number="age" type="number" />

3. .trim
   自动过滤首尾空格：

   <input v-model.trim="text" />

注意事项

• 对于单选按钮、复选框等表单控件，v-model 会绑定到不同的 DOM 属性（如 checked）。
• 在 Vue 3 中，v-model 的默认事件名从 input 改为 update，可通过参数指定：

  <custom-component v-model:title="pageTitle" />

通过上述机制，Vue 实现了高效的双向数据绑定，简化了表单处理逻辑。