分析 Vue3 Effect 函数看响应式依赖收集和触发更新过程

先给一个简单的实例,分析依赖收集和更新的过程

复制代码
let obj = { name: "hefeng6500", age: 10, flag: true }

const state = reactive(obj);

effect(() => {
  app.innerHTML = state.name + state.age
})

setTimeout(() => {
  state.age = 20
}, 1000)

reactive 函数只会创建一个响应式对象,没有产生其他的什么副作用,仅在 state 对象在访问或者修改时才会触发 proxygettersetter

依赖收集

当 effect 函数在执行时

  • Vue 底层会创建一个 ReactiveEffect 实例,创建后调用该实例的 run 方法。run 方法实际就是传入 effect 的回调函数。
  • 在执行 run 方法前,将 activeEffect = this 置为 this,也就是 activeEffect 是当前创建的 ReactiveEffect 实例。接着执行 run 方法
  • 执行 run 方法时,会访问 state.namestate.age,这就会触发两次 proxy 的 getter
  • 每触发一次 getter,就会进行一次依赖收集,也就是 track(target, key)
  • track 执行时会从 targetMap 上获取当前 taget 是否存在,未存在就 targetMap.set(target, (depsMap = new Map())) 接着,在 depsMap 上寻找 key 是否存在不存在就设置 depsMap.set(key, new Map())

最后 depsMap 保存格式如下:

  • 执行 track 时,内部调用了 trackEffect,它将刚刚的 activeEffect.deps 数组上添加了 nameage 这两个 dep,并且 这两个 dep 上分别保存了 这个 activeEffect。形成了双向记忆。

触发更新

当执行 state.age = 20

  • 触发 proxy 的 setter,进而触发 trigger 函数,找出 age 对应的 dep。调用 triggerEffects(dep)
  • triggerEffects 拿到 dep 后将该 dep 上所有的 effect 拿出来,调用它的 scheduler(其实就是 run 方法,也就是 effect 传入的回调函数)
相关推荐
火柴盒zhang几秒前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil2 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录9 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367229 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少14 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊3 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge