企业官网建设流程全解析

深入Vue3响应式心脏：手把手调试，看watch和watchEffect的依赖收集与触发全流程

在Vue3的响应式系统中，watch和watchEffect是两个核心API，它们为开发者提供了强大的数据监听能力。但你是否曾好奇，当你在组件中写下这些监听器时，Vue3内部究竟发生了什么？本文将带你深入Vue3的响应式心脏，通过实际的调试过程，一步步揭示watch和watchEffect从初始化到依赖收集，再到数据变更触发的完整链路。

我们将使用浏览器开发者工具和VSCode调试功能，追踪一个简单Vue3组件中这两个API的工作流程。通过可视化的调用栈和变量状态变化，你将直观地看到它们如何在doWatch内部产生核心差异，以及这些差异如何影响它们的行为表现。

1. 调试环境准备

在开始调试之前，我们需要搭建一个简单的Vue3项目环境。这个环境将作为我们探索响应式系统的基础。

首先，创建一个基本的Vue3项目：

npm init vue@latest vue3-debug-demo cd vue3-debug-demo npm install

然后，在src/components目录下创建一个DebugDemo.vue文件，内容如下：

<script setup> import { ref, watch, watchEffect } from 'vue' const count = ref(0) const message = ref('Hello') // watch示例 watch(count, (newVal, oldVal) => { console.log('count changed:', oldVal, '→', newVal) }) // watchEffect示例 watchEffect(() => { console.log('watchEffect triggered, count:', count.value) }) </script> <template> <button @click="count++">Increment</button> <button @click="message = 'Updated'">Update Message</button> </template>

这个简单的组件包含两个响应式变量count和message，以及分别使用watch和watchEffect创建的监听器。我们将通过点击按钮来触发数据变化，观察监听器的行为。

2. 调试工具配置

为了有效调试Vue3源码，我们需要配置调试环境。这里提供两种主要方式：

2.1 浏览器开发者工具调试

1. 在VSCode中启动开发服务器：

   npm run dev

2. 打开Chrome浏览器，访问开发服务器地址（通常是http://localhost:5173）
3. 打开开发者工具（F12），切换到"Sources"面板
4. 在左侧文件树中，找到并打开node_modules/vue/dist/vue.esm-browser.js

2.2 VSCode调试配置

在项目根目录下创建.vscode/launch.json文件，内容如下：

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Debug Vue3 App", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}/src", "sourceMaps": true, "skipFiles": ["<node_internals>/**"] } ] }

配置完成后，你可以直接在VSCode中启动调试会话，设置断点并逐步执行代码。

3. watch的初始化与依赖收集

让我们首先关注watch的工作流程。在组件初始化阶段，当执行到watch(count, callback)时，Vue3内部会发生以下步骤：

1. 进入watch函数：在vue.esm-browser.js中搜索function watch(可以找到watch的实现。设置断点并跟踪执行流程。

2. 参数处理：watch函数首先处理传入的参数：

   function watch(source, cb, options) { // 参数校验和规范化 if (__DEV__ && !isFunction(cb)) { warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` + `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` + `supports \`watch(source, cb, options?) signature.`) } return doWatch(source, cb, options) }

3. 调用doWatch：watch最终调用doWatch函数，这是watch和watchEffect共用的核心逻辑。我们可以在这里设置断点，观察传入的参数：

   • source: 我们传入的countref
   • cb: 我们的回调函数
   • options: 未传入，默认为undefined

4. getter创建：在doWatch内部，首先会根据source类型创建getter函数：

   let getter if (isRef(source)) { getter = () => source.value } else if (isReactive(source)) { getter = () => source deep = true } else if (isArray(source)) { // 处理数组情况 } else if (isFunction(source)) { // 处理函数情况 } else { getter = NOOP }

   在我们的例子中，source是一个ref，所以getter会简单地返回source.value。

5. ReactiveEffect创建：接下来，Vue会创建一个ReactiveEffect实例：

   const effect = new ReactiveEffect(getter, scheduler)

   这个effect实例负责管理依赖收集和触发更新。我们可以检查effect对象的属性：

   • fn: 就是我们上面创建的getter
   • scheduler: 一个调度函数，控制effect如何执行

6. 初始执行：如果设置了immediate选项，effect会立即执行一次。否则，它会在第一次依赖变更时执行。

4. watchEffect的初始化流程

现在让我们看看watchEffect的初始化过程。虽然它与watch共享doWatch实现，但有几个关键区别：

1. 进入watchEffect函数：在源码中搜索function watchEffect(可以找到其实现：

   function watchEffect(effect, options) { return doWatch(effect, null, options) }

2. 关键区别：注意watchEffect调用doWatch时，第二个参数（cb）传入了null。这是watchEffect与watch行为差异的根本原因。

3. getter处理：对于watchEffect，source就是effect函数本身：

   getter = () => { if (cleanup) { cleanup() } return callWithAsyncErrorHandling( source, instance, ErrorCodes.WATCH_CALLBACK, [onCleanup] ) }

4. 立即执行：与watch不同，watchEffect会立即执行其effect函数，开始依赖收集：

   effect.run()

   在调试器中，你可以看到这个执行触发了我们的console.log输出。

5. 依赖收集机制揭秘

依赖收集是Vue响应式系统的核心。让我们深入理解这个过程：

1. effect执行时的依赖收集：当effect执行其getter时，任何被访问的响应式属性都会将当前effect添加到它们的依赖列表中。

2. 调试依赖收集：

   • 在ReactiveEffect的run方法中设置断点
   • 观察activeEffect全局变量的变化
   • 跟踪track函数的调用

3. 依赖关系存储：Vue使用一个全局的targetMap来存储所有响应式对象的依赖关系：

   const targetMap = new WeakMap()

   每个响应式对象作为key，值是一个depsMap，存储该对象各个属性的依赖effect。

4. watch vs watchEffect的依赖范围：

   • watch只收集显式指定的source的依赖
   • watchEffect收集其回调函数中访问的所有响应式属性的依赖

6. 数据变更与触发更新

当点击"Increment"按钮改变count.value时，整个触发流程如下：

1. ref值变更：count.value++触发ref的setter

2. trigger函数调用：setter内部调用trigger函数，通知所有依赖这个ref的effect

3. scheduler调度：对于watch和watchEffect，它们的effect都配置了scheduler：

   const scheduler = getScheduler(options)

4. job执行：scheduler最终会安排一个job执行，这是watch和watchEffect行为差异的关键点：

   const job = () => { if (!effect.active) { return } if (cb) { // watch逻辑 const newValue = effect.run() cb(newValue, oldValue) oldValue = newValue } else { // watchEffect逻辑 effect.run() } }

   调试时可以观察：

   • cb是否存在决定了执行路径
   • newValue和oldValue的比较过程

7. 核心差异：watch与watchEffect的job逻辑

从上面的job实现可以看出两者的本质区别：

在调试过程中，你可以通过以下方式验证这些差异：

1. 修改messageref，观察哪个监听器会触发
2. 添加嵌套对象，测试deep选项的效果
3. 比较immediate选项对两者行为的影响

8. 高级调试技巧

为了更深入地理解这些机制，我们可以使用一些高级调试技巧：

1. 追踪effect依赖：在控制台检查effect实例的deps属性，查看它依赖了哪些响应式属性。

2. 观察targetMap：在控制台输入__VUE__.targetMap可以查看全局的依赖关系图（需要开发构建的Vue）。

3. 性能分析：使用浏览器的Performance工具记录监听器执行的耗时和调用栈。

4. 源码映射：配置sourcemap以便直接调试原始TypeScript源码而非编译后的代码。

通过这些调试手段，你不仅能够理解watch和watchEffect的工作原理，还能在遇到复杂场景时快速定位问题。