vue中实现双向数据

Vue 中实现双向数据绑定的方法

Vue 提供了多种方式实现双向数据绑定，主要通过 v-model 指令或自定义事件与属性绑定实现。

使用 v-model 指令

v-model 是 Vue 提供的语法糖，用于在表单元素或组件上实现双向绑定。它会根据元素类型自动选择正确的方式更新数据。

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

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

对于自定义组件，v-model 默认使用 value 作为 prop 和 input 作为事件：

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

自定义组件的双向绑定

在自定义组件中实现双向绑定，需要显式定义 model 选项或使用 v-bind 和 v-on：

<template>
  <input 
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 .sync 修饰符

Vue 2.x 支持 .sync 修饰符实现父子组件间的双向绑定：

<template>
  <child-component :title.sync="pageTitle"></child-component>
</template>

子组件通过触发 update:title 事件更新父组件数据：

this.$emit('update:title', newTitle)

Vue 3 中的变化

Vue 3 对双向绑定进行了调整：

• v-model 默认使用 modelValue 作为 prop 和 update:modelValue 作为事件
• 移除 .sync 修饰符，功能合并到 v-model 中

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

等价于：

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

实现原理

Vue 的双向绑定基于以下技术：

• 数据劫持：使用 Object.defineProperty (Vue 2) 或 Proxy (Vue 3) 监听数据变化
• 发布-订阅模式：通过 Dep 和 Watcher 实现依赖收集和通知更新
• 模板编译：将模板编译为渲染函数，建立数据与视图的关联

注意事项

• 避免直接修改 prop，应使用事件通知父组件变更
• 复杂对象需要深度监听或手动触发更新
• 数组变更需要通过变异方法或 Vue.set 触发响应