vuejs的双向绑定实现原理

Vue在初始化的时候，会有两个大步骤：

1、Compile

从root的节点开始编译，根据正则表达式，把特殊的v-*类的标签，全部转换成对应的内存中的object

2、Observe

全部的data，observer所有的属性。 针对每个属性，做一个pub/sub结构，这样每次属性变化，可以通知到他们。 

 

比如 <input type="text" v-model="xxx" />

它的双向绑定有2个过程：

1、text内容变化， 通知data变更

　　这个比较简单理解，在compile的过程中，针对text增加addeventlistener，有变化事件，更新data值

2、data属性值变化， 通知text更新内容

　　Observer阶段，针对每个data的属性，都闭包一个 Sub对象；

　　Compile阶段，把textnode和data，通过Watcher联系起来。 Watcher内部，一方面触发data，把自己放入sub中；另一方面，约定好update接口。

 

参考：http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension