总结
# 小结
这样我们就手动实现了Vue3响应式模块的主线逻辑。当然,Vue3源码中的实现,远比这要复杂很多。同时Vue3还提供了很多响应式相关的API,比如:readonly
、toRef
等等,但是其实主要实现逻辑也是在我们之前实现的逻辑之上再进行扩展完善,所以当你看完之前所有的文章,你再回过头去看Vue3响应式相关的源码,应该会轻松很多。最后总结一下,之前讲到的内容,我们实现了Vue3中的响应式逻辑,主要是:
- track 函数 -----> 负责收集依赖
- effect 函数 ------> 用户提供依赖函数的入口
- trigger 函数 ------> 触发依赖
- reactive 函数 ------> 引用类型的响应式API
- ref 函数 ------> 基本类型的响应式API
- activeEffect -------> 全局变量 将 track 和 effect 产生联系
- effectStack --------> 类似函数调用栈的方式 解决嵌套的effect问题
# 彩蛋(关于reactivity中让人惊艳的部分)
- 使用位运算提高effect的收集和执行效率
- 函数柯里化,比如:定义proxy的get陷阱的时候 有 shallowGet 和 readonlyGet 中
- 使用 createGetter 根据参数的不同执行不同的行为
- 对集合类型进行响应式包装时候的处理。比如对数组进行处理,执行arr.push(1)的时候,其实会引起数组
- 元素 和 长度 的变化,这会导致依赖的重复执行等等
# 参考链接
编辑 (opens new window)
上次更新: 2021/10/30, 16:48:40