性能权衡关键在访问频率、数据结构深度、变更粒度三点：高频读取用ref更轻量；深层嵌套reactive更稳但ref可拆解优化；大数据列表宜用ref+shallowref；组合式函数中返回ref更安全。
性能权衡的关键不在“哪个更快”，而在于访问频率、数据结构深度、变更粒度这三点。ref 和 reactive 底层都用 Proxy，但封装方式不同，导致运行时开销有可测量的差异。
高频读取场景：ref 更轻量
当某个值被频繁读取（比如分页参数、搜索关键词、计时器状态），ref 的访问路径更短：
- ref 直接访问
.value，是普通属性读取 + 响应式追踪触发 - reactive 访问嵌套属性（如
state.pagination.page）需经过多层 Proxy 拦截和依赖收集链路 - 实测中，对单个数字或字符串做每秒千次级读取，ref 比 reactive 包装同结构对象快约 12%–15%
深层嵌套对象：reactive 更稳，但 ref 可拆解优化
一个含 5 层嵌套的订单对象，如果整体用 reactive，每次任意层级修改都会触发整个对象的依赖更新；而用 ref 包装，虽然 order.value.items[0].price 写起来长，但 Vue 在模板中自动解包后，{{ order.items[0].price }} 仍能精准追踪到具体字段——前提是不破坏响应链：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 避免对 reactive 对象做解构：
const { items } = state→ 响应性丢失 - 若用 ref，可配合
toRefs或toRef提取深层字段，让每个字段独立响应，减少无效更新 - 深层对象若只局部更新（如仅改用户头像），用 reactive 更自然；若需频繁切换整块数据（如换一整套配置），ref 更利于 GC 和内存复用
大数据列表渲染：ref + shallowRef 是更优组合
渲染万级表格时，不要把整个数组用 reactive 包裹：
- reactive 会对数组每个元素递归代理，初始化慢、内存占用高
- 推荐用
ref存原始数组，配合shallowRef管理列表本身（避免深层响应），再用computed或watch控制更新时机 - 例如分页数据：
const list = shallowRef([])+const total = ref(0)，比reactive({ list: [], total: 0 })启动快、更新准
函数内创建与传递：ref 更安全
在组合式函数（composable）中返回状态时：
- 返回
ref能确保外部无论怎么解构、赋值，都只影响.value，不会切断响应链 - 返回
reactive对象，一旦被解构（const { count } = useCounter()），count 就脱离响应式系统 - 即使要返回对象，也建议用
readonly(ref(...))或toRefs显式暴露，避免意外覆盖原始引用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
