基本类型必须用ref，对象或数组优先用reactive；整体替换数据时ref更安全；解构或复用需用ref+toRefs。
选 ref 还是 reactive，关键看数据类型和使用方式，不是凭感觉，而是按规则来。
基本类型必须用 ref
数字、字符串、布尔值这些原始值，reactive 根本不支持。传进去不会报错，但完全没响应性。比如：
-
const count = ref(0)✅ 可以响应式更新 -
const count = reactive(0)❌ 无效，页面不会随 count 变化而更新
开关状态、输入框绑定值、加载标识（isLoading = ref(false)）都属于这类场景，ref 是唯一可靠选择。
对象或数组结构优先用 reactive
当数据本身是对象（如表单、用户信息、配置项）或数组（如列表、选项集合），且属性相对固定时，reactive 更简洁自然：
- 直接写
user.name，不用user.value.name - 嵌套属性自动响应，比如
user.profile.avatar改了，视图立刻更新 - TypeScript 类型推导更准确，尤其配合
defineProps或解构时
例如：const form = reactive({ username: '', password: '' })，后续所有字段操作都像普通对象一样直觉。
react-modernization
下载
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
需要整体替换时，ref 更安全
如果某段数据会频繁被整个替换成新值（比如接口刷新后直接赋新数组），ref 不会丢响应性，reactive 会：
-
list.value = response.data✅ 安全，响应性保留 -
list = response.data❌ 错误写法，list 已不再是 reactive 代理，后续修改不触发更新
这种场景常见于搜索结果、分页列表、动态表单项等，ref 的“容器”特性让它更适合承接外部赋值。
要解构或组合复用，优先用 ref + toRefs
从 setup 返回多个响应式变量给模板时，如果直接 return reactive({...})，解构后会丢失响应性：
-
const state = reactive({ a: 1, b: 2 }); return { ...state }❌ 解构破坏响应 -
const state = reactive({ a: 1, b: 2 }); return toRefs(state)✅ 每个属性转为 ref，解构安全
自定义 Hook 返回值也建议统一用 ref，方便调用方解构使用，比如：useFetch() { return { data: ref(null), loading: ref(false) } }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
