Props本身只读，不能用shallowRef包装props，但父组件可用shallowRef管理大对象再传入——避免子组件对深层结构做无意义响应式代理，降低初始化与更新开销。
Vue 组件的 Props 本身是只读的，不能直接用 shallowRef 包装 props 参数本身，但你可以在父组件中用 shallowRef 管理要传给子组件的大对象，再通过 props 传递——这样能避免在子组件内部对大对象做无意义的深度响应式代理，显著降低初始化和更新开销。
为什么 Props 传大对象容易出性能问题
当父组件用 ref 或 reactive 管理一个万级数组或深层配置对象，并直接作为 prop 传给子组件时：
- 子组件接收后，若内部使用了
toRefs、computed访问嵌套字段，或模板里写了{{ data.items[0].name }}，Vue 仍会尝试对其深层结构做响应式追踪 - 即使子组件只读取、不修改，Vue 默认仍会对整个对象递归转换（尤其配合
toRefs或解构时） - 频繁重渲染或分页切换时，大量 Proxy 创建和依赖收集会拖慢首屏和滚动帧率
正确用法：父组件用 shallowRef 管理 + 子组件按需消费
核心思路是“顶层可控、内部自治”，不把响应式负担推给子组件。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 父组件声明：
const bigData = shallowRef(initialData)，后续仅通过bigData.value = newData整体替换 - 传入子组件：
:items="bigData.value"） - 子组件接收声明为
defineProps({ items: Object as PropType，并在内部直接访问> } props.items.value - 子组件内部避免
toRefs(props.items.value)或reactive(props.items.value)，保持数据原样使用
子组件内安全访问与局部更新
如果子组件确实需要修改某几项并触发视图更新（比如勾选状态），不要直接改 props.items.value[i].checked = true 后期待自动响应——这不会触发更新。
- 推荐方式：子组件 emit 修改意图，由父组件执行
shallowRef的整体赋值（最干净） - 折中方式：父组件提供更新函数，子组件调用后手动触发：
triggerRef(bigData)（适合批量操作后统一刷新） - 禁止方式：在子组件里对
props.items.value做reactive或ref二次包装——会叠加响应式，得不偿失
搭配建议：冻结静态结构 + computed 缓存路径
进一步减少运行时开销：
- 若大对象中的某些子结构确定不变（如城市列表、枚举字典），初始化后调用
Object.freeze(item)，Vue 会跳过响应式处理 - 子组件中避免模板写
{{ item.profile.address.city }}，改用computed提前解析：const cityName = computed(() => item?.profile?.address?.city) - 对表格类场景，结合
v-memo或虚拟滚动，让 shallowRef 的优势真正落地
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
