什么是副作用（Side Effects）

m0_611349312025-12-26 10:26

副作用指的是函数执行时，除了返回值之外，还对函数外部产生了影响的操作。

常见的副作用类型

类型	示例	说明
修改外部变量	count++、formData.value.name = ''	改变了函数外部的状态
DOM 操作	document.title = 'xxx'、element.style.color = 'red'	修改了页面
网络请求	fetch()、axios.get()	与外部服务通信
定时器	setTimeout()、setInterval()	影响程序执行流程
控制台输出	console.log()	输出到外部环境
本地存储	localStorage.setItem()	修改浏览器存储
发送事件	emit('update')、eventBus.emit()	通知外部组件

对比示例

复制代码

// ✅ 纯函数：没有副作用，只计算并返回值
function add(a, b) {
  return a + b
}

// ❌ 有副作用：修改了外部变量
let total = 0
function addToTotal(value) {
  total += value  // 副作用：修改外部变量
  return total
}

// ❌ 有副作用：发起网络请求
function fetchUser(id) {
  return axios.get(`/api/user/${id}`)  // 副作用：网络请求
}

// ❌ 有副作用：修改 DOM
function updateTitle(title) {
  document.title = title  // 副作用：修改 DOM
}

Vue 中的例子

复制代码

// ✅ computed：纯函数，只计算返回值
const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})

// ❌ computed 中不应该有副作用
const fullName = computed(() => {
  console.log('计算中...')  // 副作用
  otherValue.value = 'xxx'  // 副作用
  return firstName.value + ' ' + lastName.value
})

// ✅ watch：专门用于处理副作用
watch(isChecked, (newVal) => {
  inputValue.value = ''      // 修改其他数据
  console.log('状态变化')    // 控制台输出
  saveToServer(newVal)       // 网络请求
})

总结

纯函数：相同输入 → 相同输出，不影响外部世界

副作用：函数执行时，对外部世界产生了影响