插槽本身不直接实现按需加载，需与异步组件配合：用defineAsyncComponent封装重内容并通过具名插槽传入，结合Suspense统一处理加载状态，再通过记忆化、v-lazy等优化渲染与资源加载。
插槽本身不直接实现“按需加载”，但它能和异步组件配合，把内容的加载时机、渲染逻辑和结构解耦开——真正起按需作用的是异步组件，插槽负责灵活承接和展示这些异步内容。
用 defineAsyncComponent 包裹插槽内容
当某个插槽区域的内容较重（比如图表、富文本编辑器、第三方地图），可将其封装为异步组件，并通过具名插槽传入。父组件不立即加载，只在需要显示时才触发加载。
- 定义异步组件：使用
defineAsyncComponent+ 动态import() - 在子组件中预留具名插槽（如
#chart-area） - 父组件按需传入该异步组件，而非直接渲染完整 DOM
示例：
子组件（DashboardPanel.vue）<slot name="chart-area"></slot>
父组件中使用<DashboardPanel><br> <template #chart-area><br> <AsyncChart /><br> </template><br></DashboardPanel>
其中
AsyncChart 是用 defineAsyncComponent(() => import('./Chart.vue')) 创建的。
结合 Suspense 统一处理加载状态
异步组件加载期间会进入 pending 状态，配合 <Suspense> 可让插槽区域统一展示骨架屏或 loading 提示，避免白屏或布局抖动。
- 把整个插槽包裹在
<Suspense>内 - 用
#fallback插槽定制加载 UI（如轻量 skeleton） - 加载完成自动切换到实际插槽内容，无需手动管理显隐
这样即使多个具名插槽都用了异步组件，也能共用一套加载反馈逻辑。
避免插槽内容过度重渲染
插槽内容若来自响应式数据或频繁更新的计算属性，可能引发不必要的重渲染。优化关键点：
- 对插槽内容做记忆化：用
computed或useMemo（组合式 API 中）缓存异步组件实例 - 避免在插槽内直接写内联函数或匿名对象，防止每次渲染生成新引用
- 大型列表类插槽（如无限滚动中的 item）优先用
v-memo或虚拟滚动方案，而非全量插槽透传
懒加载图片/资源作为插槽子内容
插槽常用于承载图文卡片、商品模块等。此时可在插槽内部启用图片懒加载指令（如自定义 v-lazy），让图片仅在进入视口时请求：
- 不依赖插槽机制，但与插槽天然契合：每个插槽实例可独立控制其内部资源加载
- 搭配
IntersectionObserver实现低开销监听，比 scroll 事件更高效 - 首屏只加载可见区域插槽内的图片，其余挂起，显著降低初始流量
这种“插槽承载 + 内部懒加载”的分层策略，比全局图片懒加载更精细、更可控。
