Vue响应式系统需精准控制响应范围，优先用shallowReactive/shallowRef、toRefs/toRef保响应性，computed应只依赖响应源，大型列表宜结合虚拟滚动与非响应式数据池优化。
Vue 响应式系统在大型应用中不是“越响应越好”，而是要让响应范围精准匹配更新需求。Vue 3.5+ 的改进让很多旧套路失效，也释放了新的优化空间——关键在于理解哪些数据真需要响应、哪些只需静态或浅层追踪。
优先用 shallowReactive / shallowRef 控制响应边界
大型表格、树形结构、配置对象等场景中，深层响应式会无谓追踪嵌套字段变化，造成内存和计算浪费。Vue 3.5 虽优化了 reactive 内存占用，但不等于可以滥用深度响应。
- 对只读或仅顶层变更的数据（如分页参数、主题配置），直接用 shallowReactive 替代 reactive
- 对基础类型或简单对象的局部状态（如表单开关、弹窗显隐），shallowRef 比 ref 更轻量，避免 Proxy 包装开销
- 注意：shallow 系列修改嵌套属性不会触发更新，需配合 triggerRef 或封装 update 方法手动通知
解构时用 toRefs / toRef 保响应性，别直接解构 reactive
从 reactive 对象直接解构会丢失响应性，导致模板中值不更新或逻辑错乱。这不是写法习惯问题，而是 Proxy 代理被破坏的根本限制。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 批量解构：用 toRefs(state) 将整个 reactive 对象转为 ref 对象集合，解构后仍可双向同步
- 单个取用：用 toref(state, 'field') 提取指定字段，适合在组合函数中按需暴露响应属性
- 避免写
const { count } = reactive({ count: 0 })—— 这样 count 是普通变量，改了也不更新
计算属性（computed）现在更智能，但别让它“猜”依赖
Vue 3.5 改进了 computed 的依赖追踪精度，能更好识别条件分支、可选链、解构访问中的真实依赖。但这不意味着可以随意混用响应与非响应数据。
立即学习“前端免费学习笔记（深入）”；
- 确保 computed 内部只访问响应式源（ref、reactive、props），避免意外读取全局变量或缓存对象
- 复杂逻辑中，用 unref() 显式解包可能为 ref 的值，防止因包装层级导致依赖漏捕获
- 高频更新场景下，给 computed 加 onTrack / onTrigger 调试钩子，确认它是否在不该重算时被触发
大型列表用虚拟滚动 + 非响应式数据池
渲染上千项的列表时，即使 Vue 3.5 内存降低 56%，逐项 reactive 仍是负担。真正的瓶颈不在响应式本身，而在 DOM 节点和监听器数量。
- 将原始数据用 Object.freeze 或 structuredClone 转为不可变副本，仅对可视区域内的项做 reactive 包装
- 结合 vue-virtual-scroller 或 recycle-list，只创建/更新当前视口内组件实例
- 滚动事件中避免直接修改大数组，改用 key + v-memo 或 shouldUpdate 配合自定义渲染逻辑
