Computed 依赖更新怎么理解依赖项改变时 computed 触发重新求值的底层调度过程

秋萱君_1030

秋萱君_1030

2026-09-22

503人浏览

原创

vue3 computed依赖变化时不立即执行getter,而是先标记_dirty=true,待下次访问.value时才重新计算并更新缓存。

computed 依赖更新怎么理解依赖项改变时 computed 触发重新求值的底层调度过程

当 computed 的某个依赖项(比如一个 ref 或 reactive 对象的属性)发生变化时,它不会立刻重新执行 getter,而是通过一套“标记 + 延迟求值”的调度机制来触发更新。这个过程的核心不是“一变就算”,而是“一变先标脏,再读才算”。

依赖变化 → 标记 dirty = true

computed 内部维护一个 _dirty 标志位,默认为 true(表示初始未计算)。首次访问 .value 时,getter 执行、缓存结果,并把 _dirty 设为 false。之后只要它所 track 的任意响应式依赖发生 set 操作,就会触发对应的 dep(依赖集合)中所有 effect 的 scheduler 回调。而 computed effect 的 scheduler 就是:

  • 检查当前 _dirty 状态,若为 false,说明上次结果还有效,此时才设为 true
  • 紧接着调用 trigger(computed, 'set', 'value'),通知所有依赖该 computed 的地方(比如渲染 effect 或其他 computed)需要重新取值

再次读取 .value → 触发重新计算

真正执行 getter 是在下一次访问 computed.value 时发生的。此时 get value 方法会:

Vuejs
Vuejs

Vue.js 官方推荐通过 npm 进行安装,这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版,如需指定版本可添加 @版本号,例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境(推荐 v18 及以上版本),并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目,还可通过 npm create v

下载
  • 先调用 trackRefValue(this),让当前 activeEffect(比如渲染 effect)收集对这个 computed 的依赖
  • 判断 _dirty === true,就执行 this.effect.run()(即重新跑一遍 getter)
  • 把新结果赋给 _value,并重置 _dirty = false

为什么不能直接执行 getter?

直接执行会造成冗余计算。例如模板里没用到这个 computed,或它只是被另一个未激活的 computed 间接依赖——这些场景都不该浪费 CPU。Vue3 的设计确保:

  • 只有被 activeEffect 实际读取时,才会求值
  • 依赖变更只做最小标记(_dirty = true),不立即执行逻辑
  • 多个依赖连续变更,只会触发一次 dirty 标记,避免重复调度

长依赖链如何处理?

如果 computed A 依赖 computed B,B 又依赖 ref C,那么:

  • C 变更 → 触发 B 的 scheduler → B._dirty = true
  • 下次访问 A.value 时,A 的 getter 中读取 B.value → 此时 B._dirty 为 true,B 先重新计算,再返回新值
  • A 拿到 B 的新值后继续执行,最终完成整条链的按需更新

整个过程没有预计算、不穿透触发、不递归求值,完全由“访问驱动”和“脏位控制”协同完成。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2043

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4363

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5470

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

4918

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

683

5

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

265

5

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

386

5

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.24

335

12

vue2.0和3.0区别
vue2.0和3.0区别

vue2.0和3.0区别:vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现,vue3中使⽤了es6的proxy API对数据代理,实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

1594

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 16.7万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.6万人学习