优先用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 对象。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 用户信息、表单字段、配置对象（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，比全用一种更清晰，也更易维护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
