reactive适用于结构稳定、层级深、属性多的对象或数组，支持点语法直接访问修改，嵌套自动响应但null/undefined及原生类型需注意边界，解构需用toRefs保持响应性。
用 reactive 定义复杂对象是最自然、最贴近原生 JavaScript 的方式，适合结构稳定、层级较深、属性较多的对象或数组集合。
什么时候该用 reactive
当你处理的是一个对象或数组，且希望直接通过点语法访问和修改属性（比如 state.user.name、list.push(item)），不需要频繁解构、也不涉及基本类型（如字符串、数字、布尔值）单独响应时，reactive 就是首选。
- 表单数据：多个字段嵌套在同一个对象里
- 列表状态：包含分页、筛选条件、loading 等的复合对象
- 配置对象：带多层嵌套的 UI 或业务配置
- 动态结构数据：如树形菜单、可拖拽区块的 schema
怎么正确创建和使用
直接传入普通对象或数组，返回一个 Proxy 代理对象：
import { reactive } from 'vue'
const state = reactive({
user: {
id: 1,
profile: {
name: 'Alice',
avatar: null
}
},
list: [],
filters: {
keyword: '',
status: 'all'
}
})
模板中可直接使用：{{ state.user.profile.name }}，逻辑中也无需 .value：state.list.push(newItem)、state.filters.keyword = 'test'。
立即学习“前端免费学习笔记（深入）”；
注意：不能用 const 重新赋值整个变量，比如 state = { ... } 会丢失响应性；但可以任意修改其内部属性，包括新增、删除、深层嵌套属性。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
嵌套对象自动响应，但有边界
reactive 是深度响应式的：所有嵌套对象、数组都会被递归代理，state.user.profile.name = 'Bob' 能触发更新。
但要注意边界情况：
- 如果某一层是
null或undefined，它不会被代理（比如user: null），后续赋值为对象后，需确保首次赋值就是 reactive 对象 - Map、Set、Date、RegExp 等原生类型不会被深度代理，仅作为值存在；若需响应式，应包裹在 reactive 对象内或改用
ref - 函数不参与响应式追踪，只作为方法存在
解构后失效？用 toRefs 保响应
直接解构会丢失响应性：const { user, list } = state → 这两个变量只是普通引用，修改它们不会触发更新。
正确做法是用 toRefs 提取：
import { reactive, toRefs } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = toRefs(state) // 返回的是 ref，保持响应
这样解构后的 count.value 和 name.value 才能安全读写。常用于把响应式对象“拆开”传给子组件或组合函数。
