An Inquiry into the Nature and Causes of the Wealth of Nations (国民财富的性质和原因的研究)
cloudflare 优选ip
cloudflare 反代IP
水淼aqua - Fleurdelys
JavaScript 闭包:原理、实现与实践
虚拟 DOM 深度解析
Vue3 组件更新机制:流程、原理与优化策略
在 Vue 3 中,computed 是响应式系统的核心模块之一,用于基于响应式数据派生出新的状态。其设计结合了依赖收集、缓存机制和异步调度,确保高效且精准的计算。以下从源码角度深入解析其实现原理。
一、核心类:ComputedRefImplcomputed 的核心逻辑封装在 ComputedRefImpl 类中,该类位于 @vue/reactivity 包的 computed.ts 文件。其核心结构如下:
1234567891011121314151617181920212223242526272829303132333435class ComputedRefImpl<T> { public dep: Dep; // 依赖收集器 public effect: ReactiveEffect<T>; // 内部副作用函数 private _dirty = true; // 是否需要重新计算 private _value!: T; // 缓存计算结果 public __v_isRef = true; // 标记为 ref constructor ...
Vue3 高级响应式函数Vue3 的响应式系统不仅提供了 reactive/ref 等基础 API,还通过 computed、watch、watchEffect 等高级函数实现了对响应式数据的精细化处理。这些函数基于响应式核心机制(依赖追踪与副作用调度),但各自聚焦不同场景,掌握它们的原理与差异是写出高效 Vue 代码的关键。
一、computed:带缓存的派生状态computed 用于创建依赖响应式数据的派生状态,其核心特性是缓存机制——只有当依赖的响应式数据变化时,才会重新计算,否则直接返回缓存值。
1. 原理:基于副作用的缓存调度computed 的底层依赖 Vue3 的 Effect 副作用系统,其工作流程可简化为:
初始化:创建一个 ComputedRefImpl 实例,内部包含一个 effect(副作用函数),该函数执行用户传入的 getter 逻辑。
依赖收集:首次访问 computed 的 value 时,触发 effect.run(),执行 getter 并收集 getter 中使用的响应式数据作为依赖。
缓存与更新:当依赖变化时,effect 会被标记为 ...
缃绮为下裙 紫绮为上襦
















