1.响应式原理
Vue的响应式原理依赖于Object.defineProperty,这也是Vue不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。
将整个流程进行最简化,见下图:
![4970496-aa3e9b87f19cc342.png](https://i-blog.csdnimg.cn/blog_migrate/f7a210f1d5f2880569f926cf30b41df6.png)
响应式原理
下面会重点说明Observer、Dep、Watcher代表了什么,如何实现,以及三者之间的关联关系。
2. Observer
作用:遍历对象的所有属性将其进行双向绑定。让object对象的属性都用Object.defineProperty()来进行定义,这样当获取object的属性,或者修改属性的时候,就能够触发get,set达到数据的观测的效果。![4970496-6e034ee0175b089d.png](https://i-blog.csdnimg.cn/blog_migrate/9731dd4b8762ed0f3a0b6d940d4662fb.png)
Observer
![4970496-9465db6800c9dddd.png](https://i-blog.csdnimg.cn/blog_migrate/c49b380a51a49167f2231dc2f1126cb3.png)
walk
![4970496-20a9428b4e0ea4bd.png](https://i-blog.csdnimg.cn/blog_migrate/5ae1b91ee439cb1a6139a88cf0a34acb.png)
defineProperty
3. Dep
Q1:为什么要依赖收集?
A1:如果data内定义了a,b,c,在实际模版中我们只用到了a,b,但是当c的值被修改,同样会触发c的setter方法,导致重新渲染。因此我们要进行区分,确保只有在a,b的值发生变动时重新渲染当前模版。
Q2:如何通过getter方法进行依赖收集?
A2:
![4970496-6abafa055ad5400d.png](https://i-blog.csdnimg.cn/blog_migrate/2200445af1aac867c7a2c63d7e7ce889.png)
depend
![4970496-5891ad5f5de6f0ee.png](https://i-blog.csdnimg.cn/blog_migrate/55368de111c354833adeb49af7333b43.png)
Dep
4.Watcher
观察者对象。依赖收集以后Watcher对象会被保存在Deps中,数据变动的时候会由Deps通知Watcher实例,然后由Watcher实例回调cb进行视图的更新。![4970496-0a3d9e6c65e4bbc2.png](https://i-blog.csdnimg.cn/blog_migrate/794c78afb946fd367c9f61fc229f5527.png)
Watcher
![4970496-46495ac09190e10b.png](https://i-blog.csdnimg.cn/blog_migrate/7de426275d6dd15ca132ad229036af31.png)
addSub
以上可以看到,Observer遍历object,为对象的每个属性绑定getter、setter,用以达到响应式。getter的时候收集依赖,依赖收集会调用dep.depend()方法,而这个方法中又包含了Wahcher.addDep()方法,从上图我们可以看到,addDep()方法中会判断当前订阅者是否已存在,否则即认为是有效依赖,执行dep.addSub。Observer、Dep和Watcher就互相关联起来了。