vue双向实现数据

Vue 双向数据绑定的实现方式

Vue 的双向数据绑定主要通过 v-model 指令实现，它结合了属性绑定（v-bind）和事件监听（v-on），适用于表单元素如 input、select 和 textarea。以下是几种常见的实现方式：

使用 v-model 指令

v-model 是 Vue 提供的语法糖，简化了表单元素的双向绑定。它会根据不同的输入元素自动选择合适的方式更新数据。

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

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

手动实现双向绑定

如果不使用 v-model，可以通过 v-bind 绑定值和 v-on 监听事件手动实现双向绑定。

<template>
  <input 
    :value="message" 
    @input="message = $event.target.value" 
    placeholder="请输入内容"
  >
  <p>输入的内容是：{{ message }}</p>
</template>

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

自定义组件中的双向绑定

在自定义组件中实现双向绑定，需要使用 model 选项和 $emit 触发事件。

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

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

使用 .sync 修饰符

.sync 修饰符是另一种实现父子组件双向绑定的方式，通过 update:propName 事件更新父组件数据。

<template>
  <CustomInput :value.sync="message" />
  <p>输入的内容是：{{ message }}</p>
</template>

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

双向绑定的底层原理

Vue 的双向绑定基于数据劫持和发布-订阅模式：

• 使用 Object.defineProperty 或 Proxy 劫持数据的 getter 和 setter。
• 在数据变化时通知依赖的视图更新（通过 Dep 和 Watcher 机制）。
• 监听表单元素的输入事件（如 input、change）来更新数据。

注意事项

• v-model 默认绑定的是 value 属性和 input 事件，但可以通过 model 选项修改。
• 对于复选框和单选按钮，v-model 会绑定到 checked 属性和 change 事件。
• 在 Vue 3 中，v-model 的行为略有调整，支持多个 v-model 绑定。