vue数据实现双向绑定

Vue 数据双向绑定的实现

Vue 的双向数据绑定主要通过 v-model 指令实现，结合了数据绑定和事件监听。以下是具体实现方式：

使用 v-model 指令 在表单元素上使用 v-model 绑定数据，Vue 会自动处理值的同步。

<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>

自定义组件的双向绑定 在自定义组件中实现双向绑定，需要显式定义 model 选项并触发 input 事件。

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

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

使用 .sync 修饰符 对于需要双向绑定的 prop，可以使用 .sync 修饰符简化父子组件通信。

<text-document :title.sync="doc.title"></text-document>

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

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

底层原理

Vue 双向绑定的核心基于以下机制：

数据劫持 通过 Object.defineProperty() 或 Proxy API 劫持数据对象的属性访问，在属性被访问或修改时触发更新。

发布-订阅模式 每个组件实例对应一个 watcher 实例，在属性变更时通知相关 watcher 触发重新渲染。

模板编译 模板中的指令（如 v-model）会被编译为渲染函数，建立数据与 DOM 的绑定关系。

注意事项

• 对于数组和对象，Vue 无法检测到直接通过索引或属性赋值的变化，需使用 Vue.set() 或数组的变异方法
• 在 Vue 3 中，双向绑定基于 Proxy 实现，提供了更好的性能和对新数据结构的支持
• 复杂场景可考虑使用 Vuex 或 Composition API 管理状态