找出性能瓶颈
使用 Vue DevTools 的 Performance 面板录制交互,找出渲染耗时超过 16ms 的组件。
v-memo 减少列表重渲染
<div v-for="item in list" v-memo="[item.id, item.selected]">shallowRef 替代 ref
对于不需要深度响应的大对象,用 shallowRef 代替 ref 可避免递归转换。
异步组件 + Suspense
将首屏不需要的重型组件改为异步加载,配合骨架屏,首屏 LCP 可提升 30% 以上。
