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 管理状态
