vue 的 lazy 是 effect 的选项而非 computed 开关,它使计算逻辑首次读取时才执行并缓存结果;computed 内部用 lazy effect 实现惰性求值与依赖追踪,其 value 是响应式 getter,dirty 标志控制是否重算。

Vue 的懒执行(lazy)不是一种独立功能,而是响应式系统内部为支持 computed 而设计的底层机制。它让计算逻辑不立即运行,而是在首次读取值时才执行,并自动缓存结果——这才是 computed “惰性求值 + 缓存”的本质。
lazy 是 effect 的一个选项,不是 computed 的开关
Vue 的响应式核心 effect 函数默认会立刻执行传入的函数。但当配置 lazy: true 时,effect 不再自动调用,而是返回一个可手动触发的副作用函数。这个能力被 computed 内部直接复用:
- computed 接收一个 getter 函数(如
() => count.value * 2) - 它用
effect(getter, { lazy: true })创建一个“懒副作用” - 该副作用函数不会立刻运行,只在访问
.value时才被调用并返回结果 - 同时,computed 实例内部维护
dirty标志和缓存值,确保依赖未变时不重复计算
computed 的 value 是个响应式 getter,不是普通属性
你写 const doubled = computed(() => count.value * 2),得到的 doubled 是一个带 get value() 的响应式对象。每次读取 doubled.value 时:
- 若
dirty === true(依赖已更新),则重新执行 getter,更新缓存值并标记dirty = false - 若
dirty === false,直接返回缓存值,跳过计算 - 同时触发依赖追踪:getter 中访问的
count.value会被收集为依赖,后续变化时重置dirty = true
别把 lazy 和数据懒加载混淆
有人误以为 computed({ lazy: true }) 能控制接口请求时机,其实不能。Vue 的 lazy 只作用于计算逻辑本身,不涉及异步操作:
- 真正做“接口懒加载”,要用
ref控制状态(如isLoading、data),配合onMounted或事件触发fetch - 如果想让某个计算属性“等用户点按钮再算”,那它本身就不是 computed 的适用场景——应改用普通函数或封装成方法
- computed 的 lazy 是为了性能优化(避免无用计算),不是为了延迟副作用(如发请求、改 DOM)
手动触发 lazy effect 的场景很少,但理解它有助于调试
虽然日常开发几乎不直接调用 effect(..., { lazy: true }),但在以下情况可能遇到:
- 阅读 Vue 源码或响应式原理文章时,看到
watcher.dirty或ReactiveEffect.dirty - 使用
triggerRef或markRaw时,需理解 dirty 标志如何影响 computed 更新 - 自定义响应式工具函数(如封装带缓存的派生状态)时,可能复用 lazy + effect 模式
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











