原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

监听的事件 以及绑定的属性 可以通过model设置为其他的。

v-model只不过是一个语法糖而已,真正的实现靠的还是

• v-bind:绑定响应式数据

• 触发 input 事件 并传递数据 (核心和重点)

v-model是个语法糖:
v-bind:value="value"
v-on:input="e => value = e.target.value"
因为V-model并不仅限于Form表单, 目前还支持更改事件名称和变量名称
model: {
prop: 'checked',
event: 'change'
}

原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

v-model是默认使用组件的valueprop和input事件

v-model 為一個語法糖，Vue 會默認使用一個名為 value 的 prop，以及名為 input 的事件。

為了避免不同的 value 有不同的作用，現在可以使用下面的方式自訂義自己想要的 v-model 行為。

model: {
  prop: 'checked',
  event: 'change'
}

如果想要更改 checked 這個 prop 可以在 Vue 的 instance 中用以下這行程式發送 change 這個 event，並將目標的變動值傳給 checked 這個 prop。

this.$emit('change', $event.target.value);

标签上使用```
<input type="text" :value="msg" @input="msg=$event.target.value">

{{msg}}

v-model本质上是语法糖，即利用v-model绑定数据，其实就是既绑定了数据，又添加了一个input事件监听

v-model是一个语法糖，对应组件内部实现的话，props传value,触发用$emit('input')

v-model本质上是语法糖，其实就是既用v-bind:value绑定了数据，又用v-on:input添加了一个事件监听

v-model是:value="msg" @input="msg=$event.target.value"的语法糖，其中:value="msg"是绑定了数据，value就是input输入框里的值；@input="msg=$event.target.value"就是监听input输入框里值的变化，然后改变值。一句话概括就是，绑定数据并且监听数据改变

<input v-bind:value="msg" v-on:input="msg=$event.target.value" />

v-model其实是语法糖，实现了给表单元素绑定value和相应的事件。源码里面对v-model编译后，实质上在实例的on属性上添加了回调函数，最后都是执行addEventListener。

实质上来说是一种封装或者说是语法糖，负责监听用户的输入事件，并更新数据。

举个例子：

组件默认绑定的是input事件和value的prop;
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

双向数据绑定，相当于给input框增加了一个input事件，实时监听用户输入的结果

v-model 实际上就是vue为表单元素添加input或者是change事件，在这些内容更改事件中实现vue的双向绑定

数据劫持 + 发布订阅

v-model只不过是一个语法糖而已,真正的实现靠的还是v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化.

vue2 默认使用input作为事件，使用value作为属性
vue3 默认使用 modelValue 作为 prop 和 update:modelValue 作为事件。

v-model 实际上就是vue为表单元素添加input或者是change事件，在这些内容更改事件中实现vue的双向绑定

不能是change事件哦，input事件和change事件还是有区别的。