找出性能瓶颈

使用 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% 以上。