说到响应式原理其实就是双向绑定的实现，说到 双向绑定 其实有两个操作，数据变化修改dom，input等文本框修改值的时候修改数据
1. 数据变化 -> 修改dom
2. 通过表单修改value -> 修改数据
先说第一步，数据变化更改DOM的一个前提条件是能够知道数据什么时候变了，像这种需求如果不考虑兼容性的话，用屁股想都知道可以通过 getter 和 setter 来实现，每当触发 setter 的时候更新DOM
但这就引发了一个问题，我们怎么知道当 setter 触发的时候更新哪个DOM？
一个解决思路是，我们先知道哪些dom需要用到数据，当触发 setter 的时候把所有使用到该数据的dom更新
所以我们需要一个收集依赖关系的功能，每当触发 getter 的时候如果是 DOM 中触发的，我把这个 Key 和 DOM 记录起来，这样当这个 Key 触发 setter 的时候，我把这个 Key 所对应的所有 DOM都更新一遍，这样一个简单的单向绑定就实现了
下面说说第二步，其实第二步要比第一步简单的多，以input为例：
<input v-model="name" />
很明显，我只需要使用 getAttribute 方法读取 v-model 拿到的值就是 Key，在通过 input.value 拿到 value，直接就可以用key和value把数据改了
可以看到最右侧绿色的圆代表数据，里面紫色的圆代表属性，被属性getter状语从句：setter拦截
有一条黑色虚线指向getter，标注的英文是Collect Dependencies，代表触发getter的时候收集依赖（其实就是把watcher实例推到依赖列表里）
setter处有一条红线指向Watcher，标注是Notify，代表触发setter时，会发送消息到Watcher
看到可以getter与setter的部分与我上面的猜测基本harmony和谐，但是了多个Watcher状语从句：Directive，其实这就是我上面说到的，作为VUE来讲，并不是简单的更新DOM就可以了，VUE中有很多指令，不同的指令有不同的更新DOM方式的而Directive就是用来处理这方面的事情用的
中间那那个Watcher的英文个什么鬼？
Watcher先可以暂时理解为房产中介用户买房子找中介，中介帮忙找房主，房主卖房子找中介，中介帮房主把房子卖给用户..............
setter触发消息到Watcherwatcher帮忙告诉Directive更新DOM，DOM中修改了数据Watcher也会通知给，watcher帮忙修改数据
看上图，我们上一节讲的是左边的那部分内容，这一节我们讲右边那部分内容
关于编译这块VUE分了两种类型，一种是文本节点，一种是元素节点，如果以最简单的文本节点为例，首先需要知道什么是文本节点？
你好{{name}}
这就是一个文本节点，它包含两部分，字幕：普通节点hello 状语从句：一个特殊的节点{{name}}
第一步
首先第一步VUE会通过正则来解析文本节点，把普通文本节点和特殊节点区分开，解析后大概长下面这样
[{
价值： '你好'
}，{
价值： '名字'，
tag ： true，
html ： false，
oneTime ： false
}]
第二步
第二步是遍历数组，将所有标签为真正添加的扩展对象，扩展属性包括指令方法
像文本节点的特殊节点只有两种类型，文本和HTML，所以简单判断HTML的值就可以知道，应该给扩展类型添加那种指令的接口
添加扩展对象后大概长成下面的样子
[{
价值： '你好'
}，{
价值： '名字'，
tag ： true，
html ： false，
oneTime ： false，
描述符： {
def ： {
update ： function，
bind ： function
}，
表达式： xx，
filters ： xx，
name ： 'text'
}
}]
可以看到vue内置了这么多的指令，这些指令都会抛出两个接口bind和update，这两个接口的作用是，编译的最后一步是执行所有用到的指令的绑定方法，而更新方法则是当观察者触发更新时，指令会触发指令的更新方法
观察 - >触发setter - > 观察者 - >触发更新 - > 指令 - >触发更新 - > 指令
步第三
第三步的英文将所有tag为true 的数据中的扩展对象拿出来生成一个指令并实例添加到_directives中（_directives是当前VM中存储所有的指令实例的地方）。
这个。_directives。push（
新 指令（描述符，this，node，host，scope，frag）
）
第四步
循环_directives执行所有指令实例的_bind方法。
指令中_绑定方法的作用有几点：
-
调用所有已绑定的指令的绑定方法
-
实例化一个观察器，将指令的更新与观察者绑定在一起（这样就实现了观察者接收到消息后触发的更新方法，指令可以做出对应的更新视图操作）
-
调用指令的更新，首次初始化视图
这里有一个点需要注意一下，化实例Watcher的时候，看守会将自己主动的推入德普依赖中
好了，到这里整体的流程已经结束了，来一段总结吧
总结
响应式原理共有四个部分observe，Dep，watcher， ，Directive
观察者可以监听数据的变化
Dep可以知道数据变化后通知给谁
Watcher可以做到接收到通知后将执行指令的更新操作
指令可以把Watcher和指令连在一起
不同的指令都会有更新的方法来使用自己的方式更新DOM
必须使用观察家触发吸气，德普才会收集依赖
执行流：
当数据触发setter时，会发消息给所有watcher，watcher会跟执行指令的更新方法来更新视图
当指令在页面上修改了数据会触发守望的一套方法来修改数据