双向绑定底层原理学习笔记

        vue的双向绑定是通过数据劫持以及发布者-订阅者模式来实现的。而数据劫持，则是通过Object.defineProperty() 方法来实现的。

        Object.defineProperty() 方法可以给对象进行添加或修改属性的操作。而vue就是通过这个方法给对象添加了get和set方法，给属性提供了getter和setter。就是我们刚开始学习vue的时候，点开浏览器的开发者模式，在那里面看见的getter和setter。我们修改对象的值的时候，就会触发set方法，执行里面的操作。获取对象的值的时候，就会触发get方法，执行里面的操作。

下面是MDN上的关于Object。defineProperty()方法的描述。

 

        我们通过监听器Observer来监测数据是否发生变化，实现数据的劫持监听，当监听到数据的变化的时候，就通过set方法把变化的数据传递给订阅器Dep。因此监听器Observe的核心方法就是Object.defineProperty()方法。

        订阅器Dep就是容纳所有订阅者消息的容器，即所有订阅者——代码中的vue实例对象，在vue中vue实例既是发布者，也是订阅者，同时还是消息中心。当它获取到来自监听器通过set方法发来的数据变化的时候，执行对应订阅者的更新函数。

        订阅者Watcher，在初始化的时候需要将自己添加进订阅器Dep中，即在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作，才能当监听器Observer监测到数据变化的时候执行该订阅者Watcher的更新函数。

        解析器Compile,解析器可以解析模板指令，并替换模板数据，初始化视图。然后将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器。为了避免频繁的操作引起页面回流，使用了DocumentFragment方法来暂存数据，将需要解析的dom节点存入fragment里再进行操作，之后遍历各个节点，对所有子节点进行判断，找到对应的节点之后，进行编译处理。