这篇文章已经发布超过一年了，内容可能已经过时，请谨慎参考。
响应式
响应式基础
- 声明响应式状态
ref()
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 支持所有类型 | 仅支持对象/数组 |
| 访问方式 | 通过 .value 访问 | 直接访问属性 |
| 模板自动解包 | 在模板中自动解包（无需 .value） | 始终直接访问属性 |
| 重新赋值 | 允许重新赋值整个对象 | 不能直接替换整个对象 |
| 深层响应性 | 自动深度响应 | 自动深度响应 |
| 解包行为 | 嵌套在对象中时需 .value 访问 | 嵌套的 ref 自动解包 |
| 适用场景 | 基本类型、需要重新赋值的变量 | 复杂对象、不需要替换整个对象时 |
| TypeScript 支持 | 明确的类型推断 | 可能丢失部分类型提示 |
| 响应式丢失问题 | 无（通过 .value 保持响应） | 解构或重新赋值时可能丢失响应性 |
| 典型用法 | const num = ref(0) | const state = reactive({…}) |
| 数组处理 | 需要 .value 操作数组方法 | 直接使用原生数组方法 |
| 与计算属性配合 | 常与 computed 一起使用 | 常与 toRefs 配合解构 |