最近在网上看了vue的双向数据绑定的解析，记录一下，它的整体流程图是这样的。当我们这样使用vue的时候，每次需要改的时候我们都经历了什么？说到data，this.data='xx'是用来修饰值的，所以我就从这里入手。我们先遍历数据中的所有属性，然后使用object.defineProperty的get和set方法来监听数据的修改。这里就是完成了图中的观察者对象observer之后，我们就可以完成数据的监听了，但是它是如何触发视图的更新的呢？这里需要加入发布订阅模式，当数据发生变化时通知所有watcher更新值，所以在此之前，在编译视图时将watcher添加到watcherCollector数组中读取值现在开始编译HTML模板对象，首先创建代码片段，然后用js循环遍历dom节点，通过正则化获取类似people.name（因为我们用的是{{people.name}}），在读取这个属性时，会触发observer的get函数。此时Dep.target没有值，所以此时还没有添加成功所以读取这个属性后，新建一个watcher实例，将expr(people.name)，vm，回调函数传入这个，然后把这个赋值给全局的Dep.target，所以这个watcher是这个样子的，因为watcher创建的时候会调用getOldVal方法，它会回去获取people.name的值所以会触发get函数再次在观察者中。这时，Dep.target中就有了一个值。此时依赖添加成功并编译成HTML。其他值也是如此。初始化完成后，修改值时会触发。观察者中的set函数如果新旧值不同会调用notify函数，通知所有观察者更新值。这时候，基本上字符串还有一点就是代理，数据代理实现的是this.person.name='海贼王-路飞'的功能，而不是this.$data.person.name='海贼王-路飞'，也是通过对象。实现defineProperty的get和set方法的具体代码地址（转）：https://github.com/SUNYunZeng...
