Object.defineProperty
作用:defineReactive与Object.definePropery
响应式系统分析文章已经烂大街了,简要地将,就是通过Object.defineProperty方法来重写对象的get与set,以达到依赖收集与派发更新的目的。
defineReactive函数内创建了一个dep对象,其为一个闭包对象,通过dep来进行依赖收集与派发更新。
Object.defineProperty的缺点
1. 对于对象元素的添加/删除无法检测
2. 对于数组的变化无法检测
chidOb的作用
鉴于Object.defineProperty方法的上述两个缺点,Vue中通过childOb来弥补。
1. 对象删除/添加:Vue.del
在对象上添加新元素的时候,是不会触发setter的,因此也就不能够做派发更新与依赖收集了。
因此只能通过childOb来完成此功能。
2. 数组的观测:重写数组方法
通过childOb,收集依赖,然后数组更改的时候,通过此依赖,即,array.__ob__.dep来派发更新
childOb的作用
由上述描述可知,childOb就是为了监听对象的删除/添加与观测数组方法而生的。
小结
本文没有扩展依赖收集与派发更新具体细节。主要是讲述了如何通过Object.defineReactive来进行依赖收集与派发更新,同时指出了Object.defineReactive的缺点与Vue是如何弥补该缺点的。
下图是Vue2中的两种dep实例,红色的是闭包dep,蓝色的是childOb的dep
后面会分析Vue3是如何通过Proxy升级响应式系统的。
注:本文所有的代码片段非完整的Vue源码,参考:github.com/Simplyme082…