一文了解 Vue 中的副作用函数与纯函数

副作用函数（Side Effect Function）

在 Vue 中，副作用函数是指依赖响应式数据，并在这些数据变化时自动执行的函数。Vue 会追踪响应式数据的依赖关系，并在数据更新时重新运行这些函数。

示例

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log(`count is: ${state.count}`)
})

上面这个 effect 中的函数就是一个副作用函数。它依赖 state.count，并在其变化时执行 console.log。

副作用的表现

• 修改 DOM
• 打印日志
• 发送请求
• 操作外部状态（如全局变量）
• 动画处理等

Vue 的响应式机制

Vue 会在副作用函数运行时记录读取了哪些响应式数据，并在这些数据变化时自动重新执行该函数。

常见用途

• 模板渲染（Vue 内部将模板编译成副作用函数）
• watch 和 watchEffect
• 响应式数据驱动的逻辑处理

---

纯函数（Pure Function）

纯函数是相同输入一定返回相同输出，并且不产生副作用的函数。

特点

1. 无副作用：不改变外部状态、不进行 I/O。
2. 可预测：只依赖输入参数，输出始终一致。
3. 无依赖：不依赖外部变量或状态。

示例（纯函数）

function add(a, b) {
  return a + b
}

非纯函数示例

let count = 0
function increment() {
  count += 1
}

increment 是非纯函数，因为它修改了外部状态 count。

---

副作用函数 vs 纯函数 对比表

对比项	纯函数	副作用函数
是否依赖外部状态	❌ 否	✅ 是
是否修改外部状态	❌ 否	✅ 是
是否有副作用	❌ 没有	✅ 有
可预测性	✅ 是	❌ 不一定
Vue 中的应用	computed 等	effect, watch, 模板渲染等

---

Vue 中的纯函数实践

在 Vue 中，计算属性（computed）通常是纯函数，因为它们只读取响应式状态并返回计算结果：

const state = reactive({ a: 1, b: 2 })

const sum = computed(() => state.a + state.b)

computed 中的函数不引起副作用，只根据状态返回值，是纯函数的典型应用。

---

总结

• 纯函数：描述“状态是什么”，无副作用，适合用于 computed 等场景。
• 副作用函数：描述“状态变化后做什么”，适合用于 effect、watch、DOM 操作等响应式逻辑。