vue怎么实现双向
Vue 双向绑定的实现方式
Vue 中实现双向绑定的核心机制是 v-model 指令，它结合了属性绑定和事件监听，适用于表单元素或自定义组件。
表单元素的双向绑定
在原生表单元素（如 input、select、textarea）上，v-model 会根据元素类型自动绑定对应的属性和事件：
<input v-model="message" type="text">
<p>{{ message }}</p>等效于手动绑定值和事件：
<input
:value="message"
@input="message = $event.target.value"
>自定义组件的双向绑定
对于自定义组件，v-model 默认绑定 value 属性和 input 事件。可以通过 model 选项修改默认行为：
export default {
model: {
prop: 'selected', // 绑定的属性名
event: 'change' // 触发更新的事件名
},
props: ['selected'],
methods: {
updateValue(newVal) {
this.$emit('change', newVal);
}
}
}使用 .sync 修饰符
Vue 2.x 支持通过 .sync 修饰符实现父子组件双向绑定：
<child-component :title.sync="pageTitle"></child-component>子组件通过触发 update:title 事件更新值：
this.$emit('update:title', newTitle);Vue 3 的改进
Vue 3 中 v-model 支持多个双向绑定，且默认使用 modelValue 属性和 update:modelValue 事件：
<custom-component v-model="name"></custom-component>子组件实现：
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
emitUpdate(value) {
this.$emit('update:modelValue', value);
}
}底层原理
双向绑定的实现基于响应式系统和事件机制：
- 通过
Object.defineProperty（Vue 2）或Proxy（Vue 3）监听数据变化 - 数据变化时触发视图更新
- 视图输入事件触发数据更新
对于需要深度控制的情况，可直接使用计算属性的 get/set：
computed: {
value: {
get() { return this.internalValue; },
set(v) { this.internalValue = v; }
}
}
