一句话先说：computed 是干嘛的？
computed = 根据已有数据，算出一个新数据。
而且它会自动跟着原数据变，还会缓存结果，不重复计算。
它主要“看”什么？
它主要看两件事：
1. 你依赖的数据变没变
2. 需不需要重新计算
只要你用到的响应式数据（ref / reactive）一变，
computed 就自动重新算一遍，并更新视图。
举个最简单的例子你就秒懂
比如你有一个价格：
const price = ref(100)
你想算一个折后价：打 8 折。
你就可以用 computed：
import { computed } from 'vue'
const discountPrice = computed(() => {
return price.value * 0.8
})
- 当 price 变了 → discountPrice 自动跟着变
- 页面上直接用 {{ discountPrice }} 就行
这就是 computed。
它和普通方法（function）有什么区别？
这个是面试必问，也是你必须懂的：
- 普通函数：每次渲染都会重新执行一遍
- computed：依赖没变的话，直接拿缓存，不重新算
所以：
- 要展示数据、做计算 → 用 computed
- 要点击事件、做动作 → 用普通方法
它和 watch 有什么区别？（简单提一下）
- computed：算出一个新值，注重“结果”
- watch：监听一个值变化，做动作/逻辑，注重“过程”
超级精简总结
- computed 计算属性：根据已有响应式数据，计算出新数据
- 它主要盯着你依赖的数据，一变就重新计算
- 自带缓存，性能更好，适合展示用
- 写法简单，Vue3 里直接 import { computed } 就能用
