vue响应式讲解-object
前端小菜-贺俊兰 2019-09-05 VUE
原理: vue通过Object.defineProperty这个api来实现object响应式原理,他可以检测对象属性的获取和更改。利用这个原理,通过递归的方式,把data对象里的属性包括嵌套对象等进行监测,其中通过getter进行获取数据,setter更新数据。
dep依赖管理器:
*依赖收集:
在getter这里,vue进行了依赖收集,调用dep.depend()函数。dep是一个依赖管理器,吧某个数据的依赖统一收集起来,他拥有增删改查功能。depend函数内部则调用Dep.target.addDep()函数,而Dep.target此时为watcher实例本身。
*依赖更新:
在setter这里,vue通过调用dep.notify()来获取更改后的数据,来进行更新,内部则调用了watcher实例的update函数。
1
2
3
4
5
2
3
4
5
- 谁调用了这个数据,也可以讲解为依赖调用了这个数据
- 依赖有不确定性,调用的次数不唯一
- watcher实例:
我们所说的谁谁谁调用了数据,可以表达为某个依赖调用了某个数据。实际上这个依赖是watcher实例。当数据被真正的依赖调用时,vue会创建一个watcher实例,然后赋值给Dep.target这个唯一对象,然后再触发getter,通过depend函数吧watcher实例添加到dep依赖管理器。
1
2
2
watcher实例通过this.getter.call(vm, vm)获取数据触发getter
- 缺点: Object.defineProperty无法监测到对象属性的添加和删除、只能监测更改和获取,vue通过封装vue.set()和vue.delete()这个两个api来解决问题。