vue3中的ref、reactive和普通定义[]有什么区别
在 Vue 3 中，ref、reactive 和普通变量(如 const arr = [])的本质区别在于 响应式。简单来说：
- 普通变量：数据变了，页面不会更新。
- ref / reactive：数据变了，页面会自动更新。
全方位对比
| 特性维度 |
普通变量 (const arr = [])
|
ref
|
reactive
|
|---|---|---|---|
| 响应式 | ❌ 完全不支持 | ✅ 完全支持 | ✅ 完全支持 |
| 数据类型 | 任意类型 | 任意类型（万能） | 仅引用类型（对象/数组/Map/Set） |
| Script 中访问 | 直接使用 |
必须通过 .value
|
直接使用（属性访问） |
| Template 中访问 | 不可用（非响应式） |
自动解包，无需 .value
|
直接使用 |
| 整体重新赋值 | 直接赋值即可 |
xxx.value = 新值（安全）
|
直接赋值会破坏响应式（大忌） |
| 解构行为 | 正常，但无响应式 |
解构后依然是 ref，保持响应式
|
直接解构会丢失响应式 |
何时用 ref(推荐首选)?
- 存储基本类型值(number、string、boolean)—— 必须用 ref。
- 需要整体替换的对象/数组(例如：列表数据从接口刷新，需要整体覆盖)。
- 不确定场景时 —— ref 是 Vue 3 最通用的响应式 API，闭眼选它不会有大错。
何时用 reactive(按需使用)?
- 表单对象：比如一个包含多个字段的配置对象，频繁修改各个属性。
- 当你想避免写 .value，且确信不会整体重新赋值，也不会解构该对象。
何时用普通变量?
- 纯逻辑计算：如 const total = price * quantity，且 price 和 quantity 是响应式的(计算属性更适合这种场景)。
- 常量：如 const API_BASE = '/api'。
- 不依赖 UI 的临时状态：如计时器 ID、防抖句柄等。
- 上一篇：vue2代码转vue3代码日常开发常用的有哪些
- 下一篇：无
