前端知库

Vue 大型页面应从哪些方面优化更新开销?

参考答案

先用性能工具定位耗时来自脚本、布局还是网络,再决定优化。组件层面可减少不必要的响应式深度、保持 props 稳定、拆分更新范围,并对大列表考虑虚拟化。

shallowRef、shallowReactive 适合明确接受浅层追踪的外部大型数据结构,但内部变更不再自动触发深层追踪,需要按约定替换根值。v-once 和 v-memo 也有适用条件,错误使用可能让界面停止更新。

优化不能破坏业务正确性。服务端渲染、静态生成和代码分割解决首屏交付问题,与组件更新优化是不同层次。应比较真实交互路径的性能,而不是只看首次渲染的单次计时。