vue怎样实现双向绑定

Vue 双向绑定的实现方式

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

基础语法

在表单元素上使用 v-model，绑定到 Vue 实例的数据属性：

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

对应的 Vue 实例：

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

实现原理

1. 数据劫持
   Vue 使用 Object.defineProperty 或 Proxy（Vue 3）劫持数据的 getter 和 setter，在数据变化时触发视图更新。

   

2. 模板编译
   模板中的 v-model 会被编译为 v-bind 和 v-on 的组合。例如：

   <input v-model="message">

   等价于：

   

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

3. 自定义组件中的双向绑定
   在组件中，v-model 默认绑定到 value prop 和 input 事件。可以通过 model 选项修改：

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

修饰符

• .lazy：将 input 事件改为 change 事件（失焦后更新）

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

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

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

• .trim：自动去除首尾空格

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

Vue 3 的改进

Vue 3 中 v-model 支持多个绑定，并默认使用 modelValue 和 update:modelValue 替代 value 和 input：

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

等价于：

<custom-input
  :modelValue="message"
  @update:modelValue="message = $event"
></custom-input>