当前位置：首页 > news >正文

副作用是什么？

news 2025/7/4 8:18:21

好的，这是一个非常核心的编程概念，理解它对于写出高质量代码至关重要。

我们可以从一个生活中的比喻开始。

这个词最初来源于医学。你吃一种药是为了治疗头痛（这是药的主要作用），但这种药可能会让你犯困（这就是副作用）。

“犯困”这个效果，并不是你吃药想要达成的首要目标，但它确实发生了，并对你的状态产生了影响。

在编程中，一个函数或表达式的“主要作用”是计算并返回一个值。

如果它在做这件事的同时，还对外部世界产生了任何可观测到的影响或改变，那么这些额外的、非返回值的“影响或改变”就是它的“副作用”(Side Effect)。

为了更好地理解副作用，我们先看它的反面——纯函数。一个纯函数必须满足两个条件：

纯函数示例：

// 这是一个纯函数
// 1. 它没有修改任何外部变量。
// 2. 无论调用多少次，只要输入是 2 和 3，输出永远是 5。
function sum(a, b) {return a + b; 
}

这个 sum 函数就像一个完美的数学公式，它的唯一职责就是根据输入计算出一个值。

现在来看带有副作用的例子。

副作用的常见类型：

修改外部变量（最常见的副作用）

let count = 0;// 这个函数有副作用，因为它修改了外部的 count 变量
function increment() {count++; // <--- 这就是副作用
}

修改传入的参数（如果参数是对象或数组）

function addHobby(user, hobby) {// 这个函数有副作用，因为它修改了传入的 user 对象user.hobbies.push(hobby); // <--- 副作用
}

任何 I/O 操作 (Input/Output)
- DOM 操作：document.getElementById('app').innerHTML = 'Hello';
- 网络请求：fetch('/api/data')
- 写入磁盘或数据库
- 打印到控制台：console.log('message') (因为它与外部的“控制台”系统发生了交互)

现在我们可以清晰地理解为什么 Vue 对 {{ }} 和 @click 有不同的规则了：

{{ }} (插值表达式) - “纯净区域”
- 职责：它的唯一职责是像一个纯函数那样，根据当前的数据计算出一个值并显示出来。
- 为什么禁止副作用：如果 {{ }} 里的代码可以随意修改外部数据（产生副作用），那么整个应用的状态就会变得混乱且不可预测。Vue 将无法有效地追踪数据变化并优化渲染。比如 {{ count++ }}，它一边要显示 count 的值（主要作用），一边又在偷偷地修改它（副作用），这就把事情搞乱了。
@click (事件处理器) - “副作用专区”
- 职责：它的唯一职责就是响应用户的动作，并执行能改变程序状态的副作用。
- 为什么允许副作用：用户点击按钮，就是为了触发一个改变。比如 @click="count++"，我们在这里根本不关心它的返回值，我们只关心它产生的副作用——让 count 的值加一。这正是事件处理器的天职。