优先用ref处理基础类型值，用reactive处理结构化对象或表单数据，需DOM引用时只能用ref；注意reactive不支持基本类型、解构会丢失响应性。
选 ref 还是 reactive，关键看数据“长什么样”和“怎么用”。不是哪个高级，而是哪个更贴合当前场景。
基础类型值（数字、字符串、布尔）——优先用 ref
JavaScript 的基本类型无法被 Proxy 直接代理，ref 就是为解决这个问题而生的。它把值包进一个带 .value 的对象里，让响应式机制能追踪变化。
- 计数器、开关状态、输入框临时值、API 加载标志（isLoading = ref(false)）都适合用 ref
- JS 中读写必须加 .value（count.value++），但模板中自动解包，直接写 {{ count }}
- 可以安全地整体替换值：list.value = [1, 2, 3]，响应性不会丢
结构化对象或表单数据——优先用 reactive
reactive 是专为对象和数组设计的透明代理层，不加中间层，用起来像普通 JS 对象。
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 用户信息、表单字段、配置对象（user = reactive({ name: '', email: '' })）推荐用 reactive
- JS 和模板中都直接访问属性：user.name，不用 .value
- 注意：不能直接赋新对象（user = { name: 'Tom' }），会丢失响应性；要用 Object.assign(user, { name: 'Tom' }) 或逐个赋值
需要 DOM 或组件引用时——只能用 ref
ref 不仅管数据，还负责“抓取”真实元素或组件实例，这是 reactive 做不到的。
立即学习“前端免费学习笔记（深入）”；
- const inputRef = ref(null)，配合 ref="inputRef" 获取原生 input 元素
- const childComp = ref(null)，调用子组件暴露的方法：childComp.value?.focus()
- 这类 ref 本质是“容器”，存的是非响应式值，但 Vue 会特殊处理它的绑定逻辑
别踩这些常见坑
很多问题其实就出在几个细节上：
- reactive 传基本类型无效：比如 reactive('hello') 不报错，但没响应性
- 解构会丢失响应性：无论是 ref 还是 reactive，直接解构属性（const { name } = user）都会断开响应链；要用 toRefs 或 toRef 处理 reactive 对象
- 模板里混用容易混乱：同一个组件里，表单用 reactive、状态用 ref，比全用一种更清晰，也更易维护
