新手选 ref 还是 reactive？核心就一条：看数据“长什么样”。基本类型用 ref，对象或数组用 reactive；ref 支持重新赋值且跨组件传递更可靠，reactive 语法简洁但不可直接解构或整体替换。
新手选 ref 还是 reactive？核心就一条：看数据“长什么样”。基本类型（数字、字符串、布尔值）用 ref；对象或数组用 reactive。选对了，代码清爽、响应不丢、踩坑少。
基本类型必须用 ref
JavaScript 的基本类型无法被 Proxy 直接代理，所以 reactive(123) 或 reactive('hello') 不会生效，控制台可能静默失效或报 warning。ref 则专为这类值设计，内部封装成带 .value 的响应式对象。
- 计数器、开关状态、输入框绑定值 → 用 ref
- 写法：
const count = ref(0)，脚本中改用count.value++，模板里直接写{{ count }} - 哪怕你 ref 一个对象（比如
ref({a: 1})），它也能工作——但通常这不是最优解
对象和数组优先用 reactive
当你要管理一组关联数据（如用户信息、表单字段、列表），reactive 更自然：语法简洁、无需 .value、属性访问像普通对象一样直觉。
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 用户资料
{ name, email, avatar }、筛选条件对象、待办列表数组 → 用 reactive - 写法：
const form = reactive({ username: '', password: '' })，脚本和模板都直接用form.username - 注意：reactive 只接受对象或数组，传入 null、undefined、数字等会失效
重新赋值时谁更稳？ref 胜出
这是新手最容易翻车的地方。如果你需要整个替换数据（比如接口返回新数组、重置表单），ref 天然支持，而 reactive 需要小心操作。
-
list.value = apiResponse.data→ 安全，响应性保留 -
user = { name: '新名字', id: 999 }→ ❌ 原 reactive 代理丢失，页面不再更新 - reactive 要整体替换，得用
Object.assign(user, newData)或逐个赋值，或者改用 ref 包一层对象
解构和传参场景：ref 更灵活
从父组件传 reactive 对象到子组件，再在子组件里解构属性，会丢失响应性（因为解构出来的是普通值）。ref 则可通过 .value 保持引用，或配合 toRefs 安全解构。
- 子组件接收
defineProps({ user: Object })后，const { name } = user→ name 不响应 - 正确做法：用
const { name } = toRefs(user)，或父组件传:user="userRef"，子组件用userRef.value.name - ref 在跨组件、组合式函数、逻辑抽离时，边界更清晰、传递更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
