ref vs reactive
一句话总结：优先用 ref。
import { ref, reactive } from 'vue'
// ✅ 推荐：基本类型 + 对象都能 ref
const count = ref(0)
const user = ref({ name: 'Alice', age: 18 })
// ⚠️ 仅在确定只放对象时用 reactive
const state = reactive({ count: 0 })reactive 有两个坑：
- 不能直接解构（解构后失去响应性）
- 不能整体替换（只能逐个赋值）
computed 是缓存的
只要依赖不变，多次访问只计算一次：
const fullName = computed(() => `${first.value} ${last.value}`)
console.log(fullName.value) // 计算
console.log(fullName.value) // 命中缓存watch 的三种写法
// 监听 ref
watch(count, (n, o) => console.log(n, o))
// 监听 getter
watch(() => user.value.age, (n) => console.log(n))
// 立即执行 + 深度
watch(source, cb, { immediate: true, deep: true })记住：watchEffect 自动收集依赖，但更难调试，慎用。