Vue 3 中 ref 适合基础类型，JS 中通过 .value 读写，模板中自动解包；reactive 适合对象/数组，JS 和模板中均直接操作属性，但不可直接赋新对象。
直接用 ref 或 reactive 声明，无需 return，顶层变量自动暴露给模板。
用 ref 定义基础类型响应式变量
适合数字、字符串、布尔值等简单类型。声明后通过 .value 在 JS 中读写，模板中直接写变量名（自动解包）。
- 导入并调用：
import { ref } from 'vue'，然后const count = ref(0) - JS 中修改必须加
.value：例如count.value++ - 模板中直接使用：
{{ count }}，不用写{{ count.value }} - 也支持对象或数组：如
const user = ref({ name: 'Alice' })，内部属性可直接改（user.value.name = 'Bob'）
用 reactive 定义对象/数组类响应式数据
适合结构较复杂、含多个字段的对象或数组，写法更贴近普通 JS 对象操作。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 导入并调用：
import { reactive } from 'vue'，然后const form = reactive({ username: '', password: '' }) - JS 中读写完全无
.value：直接form.username = 'admin' - 模板中需带前缀访问：
{{ form.username }} - 注意：不能直接赋新对象，否则丢失响应性；如需整体替换，用
Object.assign(form, newData)或逐项赋值
混合使用与进阶技巧
实际开发中常组合使用，兼顾可读性与响应性控制。
- 多个相关状态可用一个
reactive统一管理，避免一堆ref - 需要单独解构使用时（比如传给子组件或组合函数），可用
toRefs把reactive对象转成一串ref：const { visible, loading } = toRefs(state) - 不要混用非响应式变量承载需要驱动视图更新的逻辑——例如
let flag = true改变后模板不会重绘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
