Vue 3 中 ref 包裹对象必须通过 .value 访问和修改，否则响应式中断；替换对象需赋值给 .value，不可重赋 ref 变量本身；嵌套属性和数组操作天然响应，但须始终经过 .value。
ref 里存对象，必须通过 .value 访问和修改，否则响应式会断掉——这是 Vue 3 中最常踩的坑。
修改属性：必须走 .value 链路
ref 包裹对象后，外层是 ref 实例，内层靠 reactive 深度转为响应式。所有读写都得经过 .value 才能被 Vue 追踪。
- ✅ 正确：
user.value.name = '张三'或user.value.age++ - ❌ 错误：
const u = user.value; u.name = '李四'—— 局部变量脱离响应链，模板不更新 - ❌ 错误：
const { name } = user; name = '王五'—— 解构直接切断响应性
替换整个对象：保留 ref 壳，只换里面的内容
想用新对象完全替代旧对象？可以，但必须赋值给 .value，不能重赋 ref 变量本身。
- ✅ 正确：
user.value = { name: '赵六', age: 28 }—— ref 引用没变，内部内容已更新 - ❌ 错误：
user = { name: '孙七' }—— ref 实例被覆盖，变成普通对象，响应式彻底丢失
嵌套结构和数组更新：不用额外操作，但要注意“改”和“换”的区别
只要始终通过 .value 访问，深层属性和数组方法天然响应。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 对象新增字段：
form.value.profile.city = '杭州'—— Vue 3 支持响应式新增 - 数组过滤重填：
list.value = list.value.filter(item => item.status === 'active') - 数组原地修改：
list.value.push(newItem)或list.value.splice(index, 1)都可 - ⚠️ 注意：
list = list.value.filter(...)是错的，漏了.value就不触发更新
配合 Store 使用：暴露方式决定响应性是否延续
在 Pinia 或自定义 store 中用 ref 管理状态时，关键在“怎么传出去”。
- 对外暴露多个字段，推荐用
toRefs(store)—— 解包后仍保持响应性 - 传给子组件或工具函数时，传
store本身，别传store.value.xxx—— 后者是普通值，一传就失联 - 调试确认：
console.log(isReactive(store.value))应返回true
ref 的核心就一条：外层壳（ref 实例）不能换，里面的内容可改可换；换壳就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
