vue实现双向
Vue 实现双向绑定的方法
Vue 的双向绑定主要通过 v-model 指令实现，它结合了 v-bind 和 v-on 的功能，能够自动同步表单元素的值与 Vue 实例的数据。以下是几种常见的实现方式：
使用 v-model 指令
v-model 是 Vue 提供的语法糖，适用于表单元素（如 input、textarea、select）。它会根据元素类型自动选择正确的方式更新数据。
<template>
<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>自定义组件实现双向绑定
在自定义组件中，可以通过 model 选项和 $emit 事件实现双向绑定。需定义 prop 和对应的事件。
<template>
<custom-input v-model="message"></custom-input>
<p>Message is: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
components: {
'custom-input': {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
}
}
}
</script>使用 .sync 修饰符
Vue 2.x 支持 .sync 修饰符实现父子组件的双向绑定。父组件通过 :prop.sync 传递数据，子组件通过 $emit('update:prop') 更新。
<template>
<custom-input :value.sync="message"></custom-input>
<p>Message is: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
components: {
'custom-input': {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('update:value', $event.target.value)"
>
`
}
}
}
</script>Vue 3 的 v-model 改进
Vue 3 中 v-model 默认使用 modelValue 作为 prop，update:modelValue 作为事件。支持多个 v-model 绑定。
<template>
<custom-input v-model="message"></custom-input>
<p>Message is: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
components: {
'custom-input': {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
}
}
}
</script>双向绑定的底层原理
Vue 的双向绑定基于数据劫持和发布-订阅模式：
- 数据劫持：通过
Object.defineProperty（Vue 2）或Proxy（Vue 3）监听数据变化。 - 依赖收集：在 getter 中收集依赖（Watcher），在 setter 中通知更新。
- 模板编译：解析模板中的指令（如
v-model），生成更新函数。 - 视图更新：数据变化时触发 Watcher 更新视图，用户输入时通过事件更新数据。
注意事项
- 避免直接修改
v-model绑定的对象属性，可能导致响应式失效。 - 自定义组件需明确
prop和事件名，确保双向绑定逻辑清晰。 - Vue 3 推荐使用
v-model替代.sync，语法更简洁。
