Vue深入响应式原理（双向绑定原理）

    Vue用了快一年了，一直没有花时间去了解过它的原理，对于双向绑定这块，也只知道在项目中怎么使用。在网上百度了一波后，发现我有知识都没接触过，今天就来好好整理一下。

  我理解的Vue双向绑定的大致思路如下：

（1）Vue会使用documentfragment劫持根元素里包含的所有节点（这些节点包括标签元素、文本、换行的回车等）。

（2）Vue会把data中所有的数据，用definedProperty()变成Vue的访问器属性，这样每次修改这些属性的时候，就会触发相应属性的get,set方法。

（3）编译处理劫持到的dom节点，遍历所有节点，根据nodeType来判断节点类型，根据节点本身的属性（是否有v-model等属性）或者文本节点的内容（是否符合{{文本插值}}的格式）来判断节点是否需要编译。

（4）对v-model,绑定事件当输入的时候，改变Vue中的数据。对文本节点，将它作为一个观察者watcher放入观察者列表，当Vue数据改变的时候，会有一个主题对象，对列表中的观察者们发布改变的消息，观察者们更新自己，改变节点中的显示，从而达到双向绑定的目的。