说说你对双向绑定的理解,以及它的实现原理吗

1.1 双向绑定的概念

vue 中双向绑定靠的是指令 v-model，可以绑定一个动态值到视图上，同时修改视图能改变数据对应的值（能修改的视图就是表单组件） 经常会听到一句话：v-model 是 value + input 的语法糖。

v-model 指令扩展为 modelValue 和 onUpdate:modelValue 在模板编译过程中，我们必须自己提供这些 props：

1.2 表单元素中的 v-model

内部会根据标签的不同解析出不同的语法。并且这里有“额外”的处理逻辑

• 例如 文本框会被解析成 value + input 事件 (同时处理中文输入问题)

<input :value="value" @input="(e) => (value = e.target.value)" />
// 输入中午还没到屏幕也是响应式的

<input v-model="value" />

//底层做过处理 对中文进行拦截

• 例如 复选框会被解析成 checked + change 事件
• …

v-model

1.3 组件中的 v-model

很遗憾在 vue2 中不支持使用多个 v-model 的 （使用过时的.sync语法）。vue3 中可以通过以下方法进行绑定。

<my v-model:a="a" v-model:b="b" v-model:c="c"></my>
<my v-model="value"></my>