Vue 3 的 Effect（副作用） 是整个响应式系统的核心机制，负责管理依赖追踪和响应式触发。理解其作用和原理对掌握 Vue 的底层机制至关重要。
示例代码：
import { reactive, effect } from 'vue'
const obj = reactive({ count: 0 })
effect(() => {
console.log(`count is: ${obj.count}`)
})effect 时，函数 () => console.log(...) 会被运行。obj.count 的 get 操作，触发依赖收集（将当前 effect 关联到 obj.count）。当响应式数据的依赖变化时，自动重新执行副作用函数：
obj.count++ // 触发依赖更新，控制台打印 "count is: 1"
computed、watch、组件渲染函数等底层都依赖于 effect 实现。Vue 3 用 ReactiveEffect 类封装副作用逻辑，简化后的源码结构如下：
class ReactiveEffect<T = any> {
// 当前 effect 的所有依赖项（其他响应式对象）
deps: Dep[] = []
// 构造函数参数
constructor(
public fn: () => T, // 副作用函数
public scheduler?: () => void // 调度函数（控制重新执行方式）
) {}
// 运行副作用（触发依赖收集）
run() {
activeEffect = this // 标记当前正在运行的 effect
try {
return this.fn()
} finally {
activeEffect = undefined
}
}
// 停止侦听
stop() { /* 从所有依赖中移除自身 */ }
}数据结构：
type Dep = Set<ReactiveEffect> // 依赖集合 type TargetMap = WeakMap<Object, Map<string, Dep>> // 全局依赖存储
get 操作触发时。根据响应式对象 (target) 和键 (key) 找到存入 targetMap 的依赖集合 (dep)。
将当前活跃的 activeEffect 添加到 dep 中。
同时将 dep 加入 activeEffect.deps（反向记录，用于 cleanup）。
set 操作时。根据 target 和 key 从 targetMap 获取对应的 dep 集合。
遍历 dep 中所有 effect：
scheduler（如 computed），执行调度器（优化性能）。effect.run()。允许控制 effect 如何重新执行：
effect(() => {
console.log(obj.count)
}, {
scheduler(effect) {
// 如将 effect 推入微任务队列中异步执行
queueMicrotask(effect.run)
}
})watch 的异步批处理更新。computed 的值懒更新。用栈结构 effectStack 跟踪嵌套的 effect：
function run() {
if (!effectStack.includes(this)) {
try {
effectStack.push((activeEffect = this))
return this.fn()
} finally {
effectStack.pop()
activeEffect = effectStack[effectStack.length - 1]
}
}
}每次 effect 执行前清理旧依赖：
function run() {
cleanup(this) // 清理之前收集的旧依赖
// ...然后重新收集新依赖
}v-if 切换导致的条件依赖）。可配置不立即执行 effect：
const runner = effect(fn, { lazy: true })
runner() // 手动执行computed 属性初始化时延迟计算。组件 render 函数被包裹在 effect 中：
function setupRenderEffect(instance) {
effect(() => {
const subTree = instance.render.call(instance.proxy)
patch(instance.subTree, subTree)
instance.subTree = subTree
}, { scheduler: queueJob }) // 异步更新队列
}computed 通过 effect + 调度器实现懒更新：
const computedRef = new ComputedRefImpl(
getter,
() => { // 调度器
if (!this._dirty) {
this._dirty = true
trigger(this, 'set', 'value')
}
}
)watch 基于 effect 的调度器实现异步回调：
function watch(source, cb, { flush } = {}) {
let scheduler
if (flush === 'sync') {
scheduler = cb
} else { // 'post' 或其他默认情况
scheduler = () => queuePostFlushCb(cb)
}
effect(() => traverse(source), { scheduler })
}| 特性 | Vue 2 (Watcher) | Vue 3 (Effect) |
|---|---|---|
| 依赖追踪 | 通过遍历数据触发 getter | 通过 Proxy/Reflect 自动追踪 |
| 更新粒度 | 依赖组件级检查 | 基于精确依赖的靶向更新 |
| 性能优化 | 需手写 pureComputed 等 | 内置自动的依赖清理和调度机制 |
| 内存管理 | 易产生内存泄漏（旧 Dep 引用问题） | 通过 WeakMap 自动释放无用依赖 |
+---------------------+
| Reactive Object |
+----------+----------+
│ 访问属性时
▼
+---------------------+
| 触发 get 代理 +----→ track(target, key)
+---------------------+ │
▲ ▼ 存储依赖关系
│ +---------------------+
+----------+ targetMap |
| (WeakMap结构) |
+---------+-----------+
│
▼
+---------------------+
| depsMap (Map) |
| (key → Dep Set) |
+---------+-----------+
│
▼
+---------------------+
| dep (Set) |
| (存储所有关联的 effect)|
+---------------------+Vue 3 的 effect 通过以下机制成为响应式系统的核心：
WeakMap 自动管理依赖。到此这篇关于vue 3 effect作用与原理的文章就介绍到这了,更多相关vue 3 effect作用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！