文章目录
- 一、核心概念区分
- 二、2种组件的注册&使用对比
- 三、异步组件2种核心回调（基础/高级）
- 四、路由懒加载（异步组件的路由专属用法）
- 五、异步组件的缓存规则
- 六、异步组件底层核心（理解用，项目不用）
一、核心概念区分
- 普通组件：注册时直接传入组件对象，项目启动一次性加载所有代码，全局/局部注册后直接渲染，无延迟。
- 异步组件：注册时传入异步回调函数，项目启动仅注册组件名，首次用到时才触发回调加载组件代码，实现按需加载，减少首屏体积。
二、2种组件的注册&使用对比
js// 普通组件：直接引入+注册（一次性加载）importMyNormalfrom'./MyNormal.vue'// 全局注册普通组件Vue.component('MyNormal',MyNormal)// 局部注册普通组件exportdefault{components:{MyNormal}}js// 异步组件：定义回调+注册（按需加载）constMyAsync=()=>import('./MyAsync.vue')// 全局注册异步组件Vue.component('MyAsync',MyAsync)// 局部注册异步组件exportdefault{components:{MyAsync}}模板使用：二者完全一致，<MyNormal/><MyAsync/>三、异步组件2种核心回调（基础/高级）
js// 基础版（项目最常用）constAsyncBasic=()=>import('./MyComponent.vue')// 高级版（带加载/错误兜底）constAsyncAdvance=()=>({component:import('./MyComponent.vue'),loading:()=>import('./Loading.vue'),error:()=>import('./Error.vue'),delay:200,timeout:3000})四、路由懒加载（异步组件的路由专属用法）
jsconstrouter=newVueRouter({routes:[// 普通路由（一次性加载）{path:'/normal',component:import('./MyNormal.vue')},// 路由懒加载（异步组件，按需加载）{path:'/async',component:()=>import('./MyAsync.vue')}]})五、异步组件的缓存规则
- 代码缓存：异步组件代码仅加载一次，首次触发回调后永久缓存，再次使用无需重新加载；
- 实例缓存：组件实例默认切走销毁，需用 包裹实现实例缓存（普通/异步组件均适用）。
vue<!--缓存组件实例（普通/异步都能用）--><keep-alive><MyAsync v-if="show"/><router-view/><!--路由组件缓存--></keep-alive>六、异步组件底层核心（理解用，项目不用）
js// resolve由Vue自动传入，加载完成后传递组件配置给VueconstAsyncLow=(resolve)=>{require(['./MyComponent.vue'],resolve)}Vue.component('AsyncLow',AsyncLow)核心总结
- 普通组件一次性加载，异步组件按需加载，核心区别在代码加载时机；
- 异步组件全局/局部注册均传异步回调，仅可用范围不同，触发/缓存逻辑一致；
- 路由懒加载=异步组件的路由版，底层逻辑完全相同，省略显式组件名注册；
- 异步组件默认缓存代码， 缓存实例，二者可配合使用。
