一、简介
v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.
二、表单实现双向绑定
1. 原理 分两步骤 v-bind绑定一个value属性 v-on指令给当前元素绑定input事件 可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
2. 实现 用v-bind:value + v-on:input来模拟实现v-model
<input type="text" :value="username" @input="username = $event.target.value" />
例子解释： 通过 v-bind:value 绑定 username 变量，每次输入内容的时候触发input事件 通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给username 此时更改username时input输入框会变化，更改input输入框时username变量会变，从而实现了v-model的双向绑定功能
三、组件上的双向绑定
1. 原理
v-model绑定在组件上的时候做了以下步骤 在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性 子组件内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。 子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值 v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上
v-model就是vue的双向绑定指令，能将页面上空间输入的值同步更新到相关绑定的属性，也会在更新data绑定属性的时候，更新页面上输入控件的值
v-model作为双向绑定指令也是vue两个核心功能之一，使用非常方便，提高前端开发效率，在view层，model层相互需要数据交互，即可使用v-model
v-model的原理:
v-model主要实现了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层数值变化
1.input 输入值后更新data
首先在页面初始化时，vue编译器会编译该html模板文件，将d页面上的dom元素遍历生成一个虚拟的dom树再递归虚拟dom的每一个节点，当匹配到的是一个元素而非纯文本，则继续遍历每个属性，如果遍历到v-model这个属性，则会为这个节点添加一个input书简，当监听从页面输入值的时候，来更新vue实例中data相对应的属性值
2.data属性赋值后更新input值
同样初始化vue实例的时候，会遍历data的每一个属性，并通过defineProperty来监听每一个属性的get和set方法，从而一旦某个属性重新赋值，则能监听到变化来操作响应的页面控制
总结：
其核心就是，一方面model层通过defineProperty来劫持每个属性，一旦检测到变化，通过相应的页面元素更新
另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时的更新相关data属性值
————————————————
版权声明：本文为CSDN博主「CoderSen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_52280029/article/details/124900333