Vue的响应式实现

什么是响应式数据

一个值变化了，与之相关的副作用函数会自动执行(数据改变、模版更新...)，这个值就是响应式数据。在Vue3中，reactive、ref、computed、watch、toRef、toRefs等API来创建和管理响应式数据。

渐进式实现响应式数据

1 最基础的响应式数据

实现的基本思路如下：

1. 当读取操作发生时，将副作用函数收集到“桶”中；
2. 当设置操作发生时，从“桶”中取出副作用函数并执行。

在Vue3中使用Proxy来拦截对象读写操作的拦截，一个最简单的响应式就这样实现了：

2 统一注册副作用函数

目前副作用函数硬编码为effect，显然是不可取的。需要有一个统一的副作用函数注册机制，即使是匿名函数，也能被正确的收集。
注册函数effect，每个正在读取obj.text的副作用函数都命名为activeEffect

收集副作用函数：

3 细化依赖粒度

目前依赖的粒度是对象，副作用函数effectFn依赖obj.text，但obj.name改变，effectFn也会改变，因此需要把依赖的粒度细化到属性层面。 对象target、属性key、副作用函数effectFn的关系如下：

• target
  • key
    • effectFn1
    • effectFn2

出于性能优化的考虑，使用weakMap存储target-> (key -> effectFn)，当target不被引用，这一组key、value都会被垃圾回收。

代码实现：

• 使用weakMap存储副作用函数
• 封装依赖收集函数track
• 封装依赖集合执行函数trigger

4 清除不必要的依赖

在下面的代码中，obj.ok为true时，obj.text变动，effectFn需要进入obj.text的依赖集合；obj.ok为false时，obj.text变动不需要执行任何副作用函数，因此需要清除obj.text的依赖集合。

实现思路为每次副作用函数执行前，把它从所有依赖集合中删除；副作用函数执行中，再根据本次依赖了哪些数据，生成新的依赖集合(在track函数中实现)。 为了实现把副作用函数从所有依赖集合中删除的目标，需要维护副作用函数与依赖集合的映射关系。 关系如图：

代码实现：

在副作用函数执行时，在track函数中重新收集依赖。

完整代码：

下面这一段用来解决无限循环的bug，effectFn执行会先清空所有依赖，又会重新建立依赖，根据set的语言规范，这种情况下，forEach会无限循环。

简化情况如下，一边删，一遍加，forEach会无限循环

5 支持嵌套的effect

嵌套effect场景如下，父组件和子组件的嵌套渲染：

假设effect的嵌套如下：

目前的activeEffect是全局的普通变量，执行内层effect时，activeEffect变成了effectFn2，执行21行temp = obj.foo时，本来应该把外层effectFn1收集进依赖集合，但现在却把内层effectFn2收集了。

解决方案是增加一个副作用函数栈，在副作用函数执行时，将当前副作用函数压入栈中，待副作用函数执行完毕后将其从栈中弹出，并始终让 activeEffect 指向栈顶的副作用函数。这样就能做到一个响应式数据只会收集直接读取其值的副作用函数

代码实现：

6 支持执行时机调度

目前副作用函数是属性修改后立即执行的，但真实的副作用通常是其他代码执行完后，再批量执行副作用(例如组件渲染)，因此副作用函数执行的时机需要支持调度

支持调度
effect函数支持传入options，包含scheduler函数，来控制调度

trigger时，如果有scheduler，就通过scheduler执行effectFn

例如通过setTimeout来控制调度，实现先执行其他语句，再执行副作用函数

7 支持执行次数调度

副作用的执行次数也应该支持调度，像下面这种情况，副作用函数应该只根据最后的状态执行一次即可：

代码实现：

定义Set类型的任务队列，这样就不会加入重复的副作用函数； 使用promise.then把任务队列放在微任务队列中执行，这样保证副作用在同步代码之后执行。

总结

本文为《Vue.js设计与实现》响应系统的作用与实现一章的学习记录与梳理，实现了一个较为基础的响应系统。

原文链接：https://juejin.cn/post/7407644269995245608