选 ref 还是 reactive 取决于数据类型和使用方式：基础类型必须用 ref，对象数组优先用 reactive；解构或传参时 ref 更安全，避免响应式丢失。
选 ref 还是 reactive，关键看数据类型和使用方式，不是凭感觉，也不是看谁“高级”。用错一个，轻则改不动值、页面不更新，重则响应式突然失效，排查半天找不到原因。
基础类型必须用 ref
数字、字符串、布尔值、undefined、null、Symbol —— 这些基本类型，reactive 根本不支持。传进去不会报错，但完全没响应式效果，页面死活不更新。
- 正确写法：const count = ref(0)；修改时 count.value++
- 错误写法：const count = reactive(0)；后续任何修改都不会触发视图更新
- 模板中直接写 {{ count }} 就行，Vue 自动解包，不用写 .value
对象和数组优先用 reactive
用户信息、表单字段、商品列表这类结构化数据，用 reactive 更自然、更简洁。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 正确写法：const form = reactive({ username: '', password: '' })；修改 form.username = 'admin'
- 注意陷阱：不能直接整体替换，比如 form = { username: 'new' }，这样会丢失响应式
- 嵌套对象自动深层响应，不需要额外处理
ref 也能包对象，但要小心 .value
ref 确实能包任何类型，包括对象和数组，但代价是每次访问属性都要过一层 .value。
- const user = ref({ name: '张三' })；修改需写 user.value.name = '李四'
- 虽然 Vue 模板里自动解包（{{ user.name }} 可用），但脚本中混用 .value 和非 .value 容易混乱
- 除非需要整体替换整个对象（比如接口刷新后直接赋新数据），否则不推荐用 ref 包复杂对象
需要解构或传参时，ref 更安全
reactive 对象一旦解构，响应式就断了：
- ❌ const { name, age } = reactive({ name: '张三', age: 20 })；name 改变不更新视图
- ✅ const user = ref({ name: '张三', age: 20 })；解构后 user.value.name 仍可响应
- 组件间传 reactive 对象，接收方也必须保持引用；而 ref 传过去，.value 始终可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
