【Vue原理】VModel - 白话版

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】VModel - 白话版

说到 Vue，感觉第一印象就是双向绑定，所以v-model键值是Vue印象的半壁江山啊，这么重要的东西，你好歹要知道是怎么实现的吧

我们今天就来讲解双向绑定的工作原理，你应该知道，双向绑定就是通过绑定 dom 事件来实现的，可是，怎么绑定的事件，绑定什么事件？

首先，双向绑定，我个人认为应该分为 初始化绑定 和 双向更新 两part。

初始化绑定，就是初始化时给表单元素绑定值，绑定事件，为双向更新做准备

双向更新，就是任意一边变化，同时能让另一个边更新

双向更新那是后话，只有一开始时成功执行绑定操作才会有之后 双向更新这个东西，所以，今天按顺序来了解两个part，从四个问题开始

1、v-model 怎么给表单绑定数据

2、v-model 绑定什么事件

3、v-model 怎么绑定事件

4、v-model 如何进行双向更新

TIP

v-model 还可以用在 自定义组件上，但是很明显，这次我们先不讲这一块，而是先将正常的表单使用

---

先看结论

我们先以 input text 类型讲解，对于其他的表单元素，流程都