基本类型用 ref，对象/数组用 reactive；ref 用于单值如计数器、开关，需 .value 访问；reactive 用于表单等字段集合，直接属性读写；解构需 torefs，不可整体替换 reactive 对象。
Vue 3 中定义响应式数据，ref 和 reactive 不是“选哪个更好”，而是“用对场景才不翻车”。核心原则就一条：基本类型用 ref，对象/数组用 reactive；强行混用或忽略访问规则，轻则视图不更新，重则响应性静默丢失。
什么时候必须用 ref
处理数字、字符串、布尔值等基本类型时，ref 是唯一可靠选择。因为 JavaScript 基本类型无法被 Proxy 直接代理，Vue 必须把它包装成一个带 .value 的对象才能追踪变化。
-
const count = ref(0)→ 修改写count.value++，模板里直接写{{ count }} -
const isActive = ref(false)→ 切换状态写isActive.value = !isActive.value - 即使你用
ref({})包裹对象，它也只保证“这个 ref 变量指向的对象引用”是响应的，内部属性是否响应取决于它是否被 reactive 处理（实际中 Vue 会自动深层处理，但语义上仍是 ref 为外壳）
什么时候优先用 reactive
当你有一组逻辑关联的字段（比如表单、用户信息、配置项），用 reactive 更简洁、更符合直觉。
const form = reactive({ username: '', password: '', remember: true })- 读写都直接操作属性：
form.username = 'admin'，模板中写{{ form.username }} - 新增属性也自然响应：
form.avatar = 'avatar.png'会触发更新 - 注意：不能整体赋值替换，
form = { ... }会彻底丢失响应性
别踩这些常见坑
两者在解构、重赋值、TS 类型推导上差异明显，容易写出“看起来能跑，其实不响应”的代码。
- 解构后直接用会丢失响应性：
const { username, password } = form→ 这两个变量不是响应式的；要用toRefs(form)转换 -
ref可以安全重赋值：count.value = 100或count.value = computed(() => x + y).value -
reactive对象不能整体替换：state = { a: 1 }会让 state 失去响应性；只能逐个赋值或用Object.assign(state, newData) - TypeScript 中
ref自动推导类型更友好；reactive遇到复杂嵌套对象时建议显式标注接口类型
简单判断口诀
写代码前快速问自己三个问题：
- 这个变量是单个值（计数器、开关、ID）？→ 用
ref - 这个变量是一堆字段打包在一起（表单、API 返回对象、配置块）？→ 用
reactive - 模板里要不要写
.value？JS 里要不要写？→ref的 JS 侧必写.value，reactive全程免.value
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
