Vue2中的响应式系统简要分析

294 阅读1分钟

Object.defineProperty

作用:defineReactive与Object.definePropery

响应式系统分析文章已经烂大街了,简要地将,就是通过Object.defineProperty方法来重写对象的get与set,以达到依赖收集与派发更新的目的。

defineReactive函数内创建了一个dep对象,其为一个闭包对象,通过dep来进行依赖收集与派发更新。

Object.defineProperty的缺点

1.  对于对象元素的添加/删除无法检测

2. 对于数组的变化无法检测

chidOb的作用

鉴于Object.defineProperty方法的上述两个缺点,Vue中通过childOb来弥补。

1. 对象删除/添加:Vue.set/Vue.set/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…