[toc]

Lecture06-computed 与 watch

1、本节讲什么

学会两种"自动逻辑"：computed（根据数据算新数据） 和 watch（盯着数据，变了就做事）。它们是响应式数据的"派生与监听"。

2、概念速览

什么是 computed：根据其他数据"算出来、并缓存"的新值。依赖的数据一变，它才重算。适合"页面要展示的派生结果"（如总价、未完成数量）。

什么是 watch："盯着某个数据，它一变就执行一段逻辑"。适合"有副作用"的场景（重新请求、打日志、联动）。

正确 vs 误区：能 computed 就别 watch。computed 是"算"（纯计算、给页面用）；watch 是"盯"（要做额外的事）。别把"计算"塞进 watch。

3、先看效果

单价 × 数量自动算总价；数量一变，watch 打日志：

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const price = ref(100)
const count = ref(2)

// computed：根据已有数据"算出来"。price/count 变，total 自动更新
const total = computed(() => price.value * count.value)

// watch：监听某个值变化时触发（类似"如果变了就做某事"）
watch(count, (newVal, oldVal) => {
  console.log(`数量从 ${oldVal} 变成 ${newVal}`)
})
</script>

<template>
  <p>单价 {{ price }} · 数量 {{ count }} · 总价 {{ total }}</p>
  <button @click="count++">+1</button>
</template>

4、照着做

1. 替换 App.vue，看总价、控制台日志。
2. 点 +1，看 total 自动变、watch 打日志——两个"自动"各司其职。
3. 在模板里试试直接写 price.value * count.value，再看用 computed 的写法，体会"把计算从模板挪到脚本"。

5、常见疑问

• Q：computed 和 watch 到底怎么选？ A：要在页面上展示一个"由其它数据算出来的值" → computed（如总价、筛选后的列表）。某个值变了，我要去"做别的事"（重新请求、写日志、联动别的值）→ watch。一句话：展示用 computed，副作用用 watch。
• Q：computed 能写普通函数代替吗？ A：能写函数，但 computed 会缓存（依赖没变就不重算），且能在模板里直接当值用。用函数每次模板渲染都重算。所以派生值用 computed。
• Q：watch 能监听多个数据吗？ A：能，watch([a, b], () => {})。但尽量少用，多数场景 computed 或单个 watch 就够。

6、规范要点

• 派生数据一律用 computed，别在模板里堆计算、别手动在事件里重新赋值。
• watch 只在"有副作用"时用（请求、日志、联动），能省则省。
• 别在 watch 里写"计算逻辑"——那是 computed 的活。

7、本节验证

• 能说清 computed 是“算”、watch 是“盯”的区别 ✅
• 会用 computed(() => ...) 算出总价这类派生值 ✅
• 会用 watch(source, (newVal, oldVal) => {}) 监听数据变化 ✅
• 记得“能 computed 就别 watch”：展示用 computed、副作用用 watch ✅