ref 把值包进一个有 .value 的对象；reactive 直接把对象本身变成代理。
下面四个现场分别踩一遍：.value 规则、ref 包对象、reactive 解构丢响应、reactive 整体重新赋值断链。点按钮，看结论打进下面的迷你控制台。
| API | 什么时候用 |
|---|---|
ref | 通用响应式容器：基础类型必用它；对象/数组也能包，代价是 JS 里永远记得写 .value |
reactive | 一组「一起用」的属性对象。两条红线：不要解构（丢响应）、不要整体重新赋值（换代理断链） |
shallowRef | 大对象 / 图表实例这类「只整体替换、不改内部」的数据；内部不做深层代理，性能更好。替换时必须 x.value = 新对象 |
toRaw | 需要原始对象时（存库、结构化克隆、交给第三方库）脱掉代理用；对 toRaw 结果的深层改动不再触发更新，别拿它当日常读写入口 |