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 会被标记为 ...
缃绮为下裙 紫绮为上襦
