vue双向数据怎么实现

Vue 双向数据绑定的实现

Vue 的双向数据绑定主要通过 v-model 指令实现，结合数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式完成数据与视图的同步更新。

基础实现方式

在表单元素上使用 v-model，语法如下：

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

对应的 JavaScript 部分：

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

v-model 是 :value 和 @input 的语法糖，等价于：

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

自定义组件实现双向绑定

对于自定义组件，需通过 props 和 $emit 手动实现：

1. 父组件模板：

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

2. 子组件实现：

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

原理：

• 父组件通过 v-model 传递 parentMessage 到子组件的 value prop。
• 子组件输入时触发 input 事件并传递新值，父组件同步更新 parentMessage。

底层原理

1. 数据劫持： Vue 2.x 使用 Object.defineProperty 监听数据变化：

   Object.defineProperty(obj, key, {
   get() { return val; },
   set(newVal) {
    val = newVal;
    dep.notify(); // 触发更新
   }
   });

Vue 3.x 改用 Proxy：

new Proxy(data, {
  set(target, key, value) {
    target[key] = value;
    triggerUpdate(); // 触发更新
  }
});

1. 依赖收集：

• 在 getter 中收集依赖（Watcher）。
• 在 setter 中通知依赖更新视图。

修饰符扩展

v-model 支持修饰符：

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

示例：

<input v-model.lazy="msg">
<input v-model.number="age">

多选框与单选按钮

1. 单选按钮：

   <input type="radio" v-model="picked" value="a">

2. 多选框：

   <input type="checkbox" v-model="checked" value="a">

3. 多选列表（绑定数组）：

   

   <select v-model="selected" multiple>
   <option value="a">A</option>
   </select>

注意事项

• 避免直接修改 prop，始终通过 $emit 通知父组件。
• 对于复杂对象，需确保属性是响应式的（Vue.set 或 Vue 3 的 reactive）。
• Vue 3 的 v-model 默认使用 modelValue 作为 prop 名，可通过参数修改：

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