Vue——v-model双向绑定数据原理及用法

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

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

通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。

比如说我们在input上使用时，我们将xxx的值绑定到表单元素value上<input v-model = "xxx">；如果这个input的类型是checkbox，可以使用true-value和false-value指定特殊的值。对于selest可以通过option元素的value设置元素特殊的值；我们甚至可以结合.lazy，.number，.trim对v-model的行为做进一步限定，这样做出来的东西可以帮我们进行一些业务处理（.number->得到处理后的数字，.trim->处理后去掉空格）。

v-model用在自定义组件上时又会有很大的不同，vue3中它类似于async修饰符，最终展开的结果是modelValue属性的绑定和update:modelValue事件；vue3中我们甚至可以用参数形式指定多个不同的绑定，例如：v-model:foo和v-model:bar，非常强大！

双向绑定的原理其实就是分为两步：