原文地址：https://juejin.im/post/6844904185373130759
响应式数据/双向绑定原理
vue的响应式数据/双向绑定主要是指：数据变化更新视图，视图变化更新数据。 将data中的js对象做遍历，利用Object.defineProperty将data中的数据全部转换成getter/setter，每个组件都对应一个Watcher实例，收集数据中的依赖，当数据发生改变触发setter时，会通知对应的组件，组件通过虚拟DOMdiff算法再做改变，如官网的流程图所示：
image.png
监听器observer
对data里面的数据对象做遍历（子对象存在时做递归遍历），利用Object.defineProperty将data中的数据全部转换成getter/setter，当某个属性和值发生改变时就能触发setter，就会监听到数据的变化。例如：
<body>
<div id="app"></div>
</body>
<script>
const obj = { name: 'vue' }
Object.defineProperty(obj, 'name', {
get() {
return document.getElementById('app').innerHTML
},
set(val) {
console.log('name发生了变化')
return document.getElementById('app').innerHTML = val
}
})
setTimeout(()=>{
obj.name = '响应化/双向绑定'
},1000)
</script>
可以看到1s后div内容填充了'响应化/双向绑定'，控制台也打印出了'name发生了变化'。
模板解析器Compile
模板解析器主要通过遍历模板，查看都使用了哪些变量、指令，为数据添加订阅者Watcher，一旦数据发生了改变，调用更新函数更新。
订阅者Watcher
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式.
订阅器Dep
订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
网友评论