Vue的一大亮点就是其响应式,在官方文档的描述中,说它是非侵入式的响应式系统,那么何为侵入式的响应式系统呢?
侵入式开发和非侵入式开发的区别就在于写代码的人是否需要引入这个框架的代码,如果强制性地必须继承这个框架的某个类或者是实现某个接口,那么该框架就是侵入式的,而Vue则是非侵入性的框架,你只需要为某个对象进行赋值操作,Vue底层会自动检测到该变化并投映到其虚拟DOM上,而开发者并不需要知道这些变化过程是如何实现的。
而现在我们就来探讨一下响应式的底层原理。
在3.0之前,Vue的响应式是依赖于Object.defineProperty方法实现的,而在IE8及其以下版本是无法兼容该方法的,因此这也就是Vue不兼容IE8的原因了
而在3.0时Vue是利用Proxy。
Object.defineProperty封装两个方法,一个叫get,用来设置getter,当读取访问数据的时候会触发getter。 另一个叫set,当设置值的时候会触发setter,当触发setter时,会通知watcher进行视图更新,当然,前提是依赖数据发生了变化,getter的作用就是用来收集依赖。
总的来说,要实现响应式,就必须要实现以下几点:
1、数据监听Observer,用于监听数据和设置getter和setter,以及收集依赖,每个Observer有一个__ob__的属性(通过def函数定义在data属性里面),即其自身,当要实例化一个observer对象时会检查当前对象有没有observer属性如果有则使用当前的observer对象,否则新建一个observer,如果当前observe的是一个对象则直接进行walk对其defineReactive绑定,如果是数组则对其每一个成员进行observe
2、dep,会收集依赖的watcher,会为每个对象及其子对象设置该属性,收集依赖时使用dep.depend方法,当试图变化时使用dep.notify方法通知watcher,这个方法会遍历订阅者(Watcher)列表向其发送消息,为了防止多余的多余的代码操作,会将watcher赋值给dep.target,只有具有dep.target的依赖才会为其执行整个流程..
3、Watcher,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图,watcher对象会保存到dep.subs中。
原文:https://www.cnblogs.com/siminshare/p/10940144.html