Vue3里computed和watch该怎么选？区别到底在哪？

做Vue项目时，不少同学会纠结：同样是处理数据变化，computed和watch到底咋选？有时候用错了，要么页面不更新，要么性能拉胯，今天把这俩“兄弟”拆明白，以后写代码不踩坑～

computed和watch各自是什么？

先从基础概念入手，理解它们的设计初衷，后面对比才好懂。

computed：计算属性，帮你“自动算结果”
比如做个用户全名展示，firstName和lastName是响应式数据，想把它们拼成fullName，用computed就像这样：

<template>{{ fullName }}</template>
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => `${firstName.value}${lastName.value}`)
</script>

只要firstName或lastName变了，fullName会自动更新，而且它有缓存，如果这俩值没变化，多次访问fullName不会重复计算，性能更优。

watch：侦听器，帮你“响应变化做操作”
假设用户修改了昵称，需要调用接口同步到后端，这时用watch监听昵称变化，触发请求：

<script setup>
import { ref, watch } from 'vue'
const nickName = ref('小V')
watch(nickName, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    // 调用接口更新
    api.updateNickName(newVal)
  }
})
</script>

watch的核心是监听数据变化，执行副作用（比如发请求、修改DOM、操作其他数据），它能拿到变化的新旧值，还能控制是否“深度监听对象”“立即执行”这些细节。

核心区别有哪些？

光看概念还不够，得抓准「触发逻辑、场景、缓存、语法」这四个关键差异，才能真正用对地方。

触发逻辑：被动响应 vs 主动侦听

• computed是“被动响应”：只有依赖（比如firstName、lastName）变化，并且计算属性被使用时（比如模板里渲染{{ fullName }}），才会重新计算。
• watch是“主动侦听”：只要监听的数据源（比如nickName）变化，不管有没有被使用，都会执行回调函数。

举个栗子：如果把fullName放在computed里，但模板没渲染它，就算firstName变了，computed也不会触发；但如果watch监听firstName，只要firstName变了，回调就会执行。

使用场景：衍生值计算 vs 副作用操作

• computed适合“衍生值计算”：当你需要把多个响应式数据“组合/过滤/转换”成新值，而且希望结果被缓存时，选它，比如购物车商品总价（依赖多个商品的price和count）、表格筛选后的列表。
• watch适合“副作用操作”：当数据变化后，需要执行异步请求、复杂逻辑、修改其他无关数据时，选它，比如用户登录状态变化后跳转页面、输入框实时搜索（结合防抖）。

缓存机制：有缓存 vs 无缓存

• computed有缓存：只要依赖不变，多次访问计算属性，结果直接从缓存拿，不会重复执行函数。
• watch无缓存：每次监听的数据源变化，都会执行回调，哪怕逻辑和上次一样。

比如做实时搜索时，如果用computed存搜索结果，每次输入变化都会重新计算；但如果搜索需要发请求（副作用），用watch+防抖更合理，因为computed不适合做异步操作。

语法设计：声明式 vs 命令式

• computed是声明式：你只需要声明“结果是什么”，Vue自动处理更新逻辑，代码更简洁，侧重“结果输出”。
• watch是命令式：你需要明确“数据变化后做什么”，侧重“过程执行”，代码更偏向“怎么做”。

怎么选？看这几个实际场景

光记区别不够，结合真实开发场景判断更直观，分享4个高频场景，帮你快速决策～

场景1：需要缓存的衍生数据 → 选computed

比如做电商购物车，每个商品有price和count，要计算总价：

const products = ref([{ price: 99, count: 2 }, { price: 199, count: 1 }])
const total = computed(() => {
  return products.value.reduce((sum, item) => sum + item.price * item.count, 0)
})

只要products里的商品价格或数量变化，total自动更新，而且多次渲染模板时，total不会重复计算（缓存生效），性能更好。

场景2：数据变化后的副作用 → 选watch

比如用户修改个人信息（对象）后，同步到后端：

const user = ref({ name: 'Vue', age: 3 })
watch(user, (newUser, oldUser) => {
  // 调用接口更新用户信息
  api.updateUser(newUser)
}, { deep: true }) // 深度监听对象内部变化

这里修改user.name或user.age，watch都会触发，执行发请求的副作用，如果用computed，没法在计算过程中发请求（违背computed纯函数的设计）。

场景3：依赖多个数据，且需要精细控制 → 选watch

比如同时监听user.name和user.age，变化时做复杂逻辑：

watch([() => user.value.name, () => user.value.age], ([newName, newAge], [oldName, oldAge]) => {
  // 同时处理name和age变化的逻辑
  if (newName !== oldName || newAge !== oldAge) {
    doSomethingComplex()
  }
})

computed只能返回一个值，要是多个依赖的变化需要联动复杂逻辑，watch的“多源监听+回调逻辑”更灵活。

场景4：需要旧值对比 → 选watch

比如表单输入时，对比新旧值提示用户：

const inputVal = ref('')
watch(inputVal, (newVal, oldVal) => {
  if (newVal.length < oldVal.length) {
    alert('输入内容不能减少哦～')
  }
})

computed拿不到旧值，只能拿到当前计算结果，这种“新旧值对比”的场景，watch是唯一选择。

底层原理帮你更懂它们

理解底层逻辑，能避免很多“明明改了数据，页面却没更新”的坑。

computed的底层：缓存+惰性计算

Vue3里，computed是用effect包装的，开启了lazy（惰性）和scheduler（调度器），第一次访问计算属性时，才会执行计算函数，然后把结果缓存起来，之后只有依赖（比如firstName、lastName）变化，并且计算属性被使用时，才会触发scheduler重新计算。

简单说：computed的更新是“按需”的——依赖变了，但没人用这个计算属性，它就不更新；有人用了，才会重新算。

watch的底层：侦听effect+灵活调度

watch的本质是创建一个侦听effect，去跟踪数据源的变化，当数据源（比如nickName）变化时，Vue的响应式系统会触发trigger，执行watch的回调。

而且watch支持immediate（初始化时立即执行回调）、deep（递归遍历对象所有属性，监听变化）、flush（控制回调执行时机，比如DOM更新前/后）这些选项，让你能精细控制“什么时候执行副作用”。

实战避坑指南

知道区别后，还要避开常见错误，否则容易写出“能跑但别扭”的代码。

computed避坑：别在里面做副作用

computed的设计是纯函数（只做计算，没有副作用），如果在computed里发请求、修改其他响应式数据，会导致更新逻辑混乱，甚至死循环，比如这样写就错了：

// 错误示范！computed里做异步请求
const userInfo = computed(async () => {
  const res = await api.getUser()
  return res.data
})

正确做法：如果需要异步获取数据，用watch或者onMounted钩子。

watch避坑：谨慎用deep监听对象

如果监听的是对象（比如user），开启deep: true会递归遍历对象的所有属性，性能开销大，建议：

• 只监听对象的某个属性，比如() => user.value.name；
• 如果必须监听整个对象，确保对象层级不深，或者用watchEffect（但watchEffect和watch有区别，这里优先用watch的精确监听）。

immediate: true时，第一次执行的oldVal是undefined，因为还没旧值，写逻辑时要注意判断。

综合例子：选对工具，代码更丝滑

最后用两个例子巩固理解，看computed和watch怎么配合干活～

例子1：购物车结算（computed的典型用法）

需求：购物车商品列表变化时，自动计算总价和优惠后价格。

<template>
  <div>总价：{{ total }}</div>
  <div>优惠后：{{ discountTotal }}</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const products = ref([
  { id: 1, price: 100, count: 2 },
  { id: 2, price: 200, count: 1 }
])
// 计算总价（依赖products）
const total = computed(() => {
  return products.value.reduce((sum, item) => sum + item.price * item.count, 0)
})
// 计算优惠后价格（依赖total）
const discountTotal = computed(() => total.value * 0.9)
</script>

这里total和discountTotal都是“衍生值”，用computed缓存+自动更新，性能和可读性都拉满。

例子2：用户信息修改同步后端（watch的典型用法）

需求：用户修改昵称或年龄后，调用接口更新，同时记录修改时间。

<script setup>
import { ref, watch } from 'vue'
const user = ref({ name: '小明', age: 18 })
watch(user, async (newUser, oldUser) => {
  // 记录修改时间
  newUser.updateTime = new Date().getTime()
  // 调用接口更新
  await api.updateUser(newUser)
  // 可以在这里做其他副作用，比如提示成功
  alert('修改成功！')
}, { deep: true, immediate: false }) // 深度监听，初始化不执行
// 模拟用户修改
setTimeout(() => {
  user.value.name = '小红'
}, 3000)
</script>

用户修改name后，watch触发，执行“更新时间+发请求+提示”这一系列副作用，逻辑清晰不混乱。

记住这两个核心判断点

选computed还是watch，本质看两个问题：

1. 是否需要“缓存的衍生值”？如果是，选computed；
2. 是否需要“数据变化后的副作用”？如果是，选watch。

理解它们的触发逻辑、使用场景、底层原理后，写Vue代码时就不会再纠结,性能和可读性也能双丰收～