vue双向绑定使⽤和原理

• 定义
• 好处
• 在哪使⽤
• 使⽤⽅式、使⽤细节、vue3变化
• 原理实现描述

1. vue中双向绑定是⼀个指令 v-model ，可以绑定⼀个响应式数据到视图，同时视图中变化能改变该值。

2. v-model 是语法糖，默认情况下相当于 :value 和 @input 。使⽤ v-model 可以减少⼤量繁琐的事件处理代码，提⾼开发效率。

3. 通常在表单项上使⽤ v-model ，还可以在⾃定义组件上使⽤，表示某个值的输⼊和输出控制。

4. 通过 <input v-model="xxx"> 的⽅式将xxx的值绑定到表单元素value上；对于checkbox，可以使⽤ true-value 和false-value指定特殊的值，对于radio可以使⽤value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy,.number,.trim对v-mode的⾏为做进⼀步限定； v-model ⽤在⾃定义组件上时⼜会有很⼤不同，vue3中它类似于 sync 修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中我们甚⾄可以⽤参数形式指定多个不同的绑定，例如v-model:foo和v-model:bar，⾮常强⼤！

5. v-model 是⼀个指令，它的神奇魔法实际上是vue的编译器完成的。我做过测试，包含 v-model 的模板，转换为渲染函数之后，实际上还是是value属性的绑定以及input事件监听，事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对，⽐如text类型的input和textarea会展开为value和input事件；checkbox和radio类型的input会展开为checked和change事件；select⽤value作为属性，⽤change作为事件。