标签： 依赖

各位观众老爷们，晚上好！ 欢迎来到“Vue 3 源码探秘”系列讲座。 今天我们要聊的是 watchEffect 这个神奇的 API，看看它如何在内部悄悄地通过 effect 函数实现依赖收集和自动停止，而且还不用你显式地告诉它依赖是谁！ 这听起来是不是有点像魔术？ 别急，咱们一层层揭开它的神秘面纱。 开场白：watchEffect 是个啥？ 在 Vue 的响应式世界里，我们经常需要监听一些数据的变化，然后执行一些副作用。 watch API 可以让你精确地指定要监听的数据源，但有时候，你可能只想简单地执行一些副作用，而且副作用里用到了哪些响应式数据，你也不想手动一个个列出来。 这时候，watchEffect 就派上用场了。 简单来说，watchEffect 会立即执行一次你提供的回调函数，并在执行过程中自动追踪所有被访问的响应式依赖。 以后，只要这些依赖发生变化，回调函数就会再次执行。 更棒的是，当组件卸载时，watchEffect 还会自动停止监听，避免内存泄漏。 effect 函数：响应式系统的核心 要理解 watchEffect 的实现，首先要搞清楚 effect 函数。 eff …

继续阅读“探讨 Vue 3 源码中 `watchEffect` 如何在内部通过 `effect` 函数实现依赖收集和自动停止，无需指定依赖源。”

Vue 3 依赖追踪：一场关于 dep 的深度解剖（附赠 WeakMap 与 Set 的爱恨情仇） 大家好，我是你们今天的源码导游，人称“变量观察家”。今天，我们不聊八卦，只聊 Vue 3 源码里一个非常核心，但又经常被忽略的概念：dep。 简单来说，dep 就是 Vue 3 响应式系统的神经中枢，它负责收集依赖，并在数据变化时通知相关的所有“观察者”。 如果你觉得 “依赖”、“观察者” 这些词听起来有点抽象，别担心，等下我会用非常接地气的方式，帮你彻底搞懂它们。 1. dep 的精确定义：你以为它只是个 Set？ 首先，我们要明确一点：dep 不仅仅是一个 Set。 虽然在 Vue 3 的实现中，dep 内部确实使用了一个 Set 来存储依赖（也就是 effect 函数），但 dep 本身还肩负着其他重要的职责。 让我们先来看一下 dep 的简化版代码骨架： // 简化版 dep class Dep { subs: Set<ReactiveEffect> = new Set(); // 存储 effect 的 Set active = true; // 用于控制是否收集依 …

继续阅读“解释 Vue 3 源码中 `dep` (依赖) 数据结构的精确定义，以及它如何与 `WeakMap` 和 `Set` 结合存储和管理依赖。”