标签： 源码

Vue 3 Computed 属性的脏活累活：dirty 和 lazy 深度解析 大家好，我是老码，今天咱们来聊聊 Vue 3 computed 属性里藏着的两个小秘密：dirty 标志和 lazy 属性。 别看它们名字平平无奇，但它们可是 Computed 属性实现高效缓存、避免不必要计算的幕后功臣。 想象一下，你开了家奶茶店，computed 属性就像你的特调奶茶配方，而 dirty 和 lazy 就像你的库存管理系统。 如果每次有人点单，你都从头开始种茶、养奶牛，那得累死。 dirty 和 lazy 就是用来告诉你： “嘿，这个配方是不是需要更新了？”以及“嘿，现在是不是真的需要用到这个配方了？”。 咱们先从 dirty 标志开始说起。 dirty 标志： “我需要更新了！” dirty 标志，顾名思义，就是“脏”的意思。 在 computed 属性的上下文中，它表示 computed 属性的缓存值是否需要更新。 如果 dirty 为 true，就说明依赖的数据发生了变化，缓存值已经过时，需要重新计算。 如果 dirty 为 false，就说明缓存值还是有效的，可以直接使用，避免 …

继续阅读“阐述 Vue 3 源码中 `computed` 属性的 `dirty` 标志和 `lazy` 属性的实现，以及它们如何避免不必要的重复计算，实现高效缓存。”

各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 响应式系统的核心之一：ReactiveEffect 类。这玩意儿听起来玄乎，但其实就是个“依赖追踪器”，负责帮你搞清楚哪个数据变了，哪些地方需要跟着更新。它背后的功臣就是 WeakMap 和 Set 这两个数据结构。 开场白：响应式系统的核心挑战 在 Vue 3 中，响应式系统要解决一个核心问题：当数据发生变化时，如何高效地找到所有依赖于这个数据的“副作用”（Effect）。 所谓副作用，就是因为数据变化而需要执行的函数，比如更新 DOM、执行计算属性等等。 如果每次数据变化都遍历所有可能的副作用，那性能肯定爆炸。所以，我们需要一种机制，能够快速地找到真正需要更新的副作用。 这就是 ReactiveEffect 和它的小伙伴们（WeakMap 和 Set）要解决的问题。 ReactiveEffect 类：副作用的载体 首先，咱们来看看 ReactiveEffect 类的基本结构（简化版）： class ReactiveEffect<T = any> { active = true; // 标记 effect 是否激活 dep …

继续阅读“剖析 Vue 3 源码中 `ReactiveEffect` 类如何利用 `WeakMap` 和 `Set` 数据结构高效地管理依赖关系图，解释 `targetMap` 和 `dep` 的具体数据结构。”