vue中v-model的实现原理到底是什么？

Question

看了网上好多关于v-model实现原理的文章，不是很清楚，还跟vue双向数据绑定混在一起了。
下面说下我我对v-model的理解，请大家看下问题出在哪里了。

---

v-model是语法糖。
v-model原理：

1. v-bind绑定响应式数据
2. 通过oninput触发事件获取当前$event.target.value，然后赋值给当前变量。

不知道以下算不算是v-model原理

3.当前变量值修改，会触发object.definedProperty中的set方法，将data中的当前变量进行赋值。

v-bind绑定响应式数据，是什么原理，搜索网上也查不出来
以上是看了好多篇v-model实现原理后自己的理解，可能跟原理有些偏差，请大家多提建议，谢谢。

Answer 1

v-model原理

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

响应式数据原理

Vue2.x

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

Vue3.x

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Answer 2

首先 v-bind 、 v-model 是什么？指令，那么他能控制什么，如何使用？

然后说一下 v-model 是什么。语法糖 :value + @input。还要分为两种情况。

1. 原生DOM

   1. input
   2. select

   3. textarea

      <input v-model="val">
      <!-- 基本等价于，因为内部还有一些其他的处理 -->
      <input :value="val" @input="val = $event.target.value">

2. 自定义组件

   <v-input v-model="val"></v-input>
   <!-- 等价于 -->
   <v-input :value="val" @input="val = $event"></v-input>

我说的这些官网都有，没找到就是因为看的不仔细而已。

Answer 3

楼上已经说得很清楚了。
使用v-model分为两种场景。

1. 父子组件之间的双向绑定
2. dom元素上双向绑定

第一种场景可以看文档。
第二种场景分两个方向：

1. 改变数据时通知视图更新

   vue初始化时会进行依赖收集，通过Object.definedProperty()的getter收集某个属性的所有依赖，然后通过Object.definedProperty()的setter在某个属性更新时通知视图更新。

2. 视图改变时通知数据更新

   通过监听表单元素的input事件，从而通知数据更新。

你会发现vue-model只能用于input、textarea这些表单元素。根本原因是div、span这些普通的dom元素的“值“发生变化时，vue没办法监听到。

Answer 4

<p v-model="msg"></p>
<!-- v-model相当于绑定了value属性和input事件 -->
<p v-bind:value="msg" v-on:input="msg = $event.target.value"></p>

可以用原生js实现后来理解

<input type="text" id="oP">
<span id="oSpan"></span>

let oP = document.getElementById('oP');
let oSpan = document.getElementById('oSpan');
oP.addEventListener('input', function (e) {
    oSpan.innerText = e.srcElement.value;
})

当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 input 事件。

在vue中，v-model相当于给节点绑定了input事件和value值，value值改变触发事件，改变value值为相应的vue中的data数据信息。