异步组件核心知识点

文章目录

一、核心概念区分
二、2种组件的注册&使用对比
三、异步组件2种核心回调（基础/高级）
四、路由懒加载（异步组件的路由专属用法）
五、异步组件的缓存规则
六、异步组件底层核心（理解用，项目不用）

一、核心概念区分

普通组件：注册时直接传入组件对象，项目启动一次性加载所有代码，全局/局部注册后直接渲染，无延迟。
异步组件：注册时传入异步回调函数，项目启动仅注册组件名，首次用到时才触发回调加载组件代码，实现按需加载，减少首屏体积。

二、2种组件的注册&使用对比

javascript 复制代码

js
  
// 普通组件：直接引入+注册（一次性加载）
import MyNormal from './MyNormal.vue'
// 全局注册普通组件
Vue.component('MyNormal', MyNormal)
// 局部注册普通组件
export default { components: { MyNormal } }
 
 
js
  
// 异步组件：定义回调+注册（按需加载）
const MyAsync = () => import('./MyAsync.vue')
// 全局注册异步组件
Vue.component('MyAsync', MyAsync)
// 局部注册异步组件
export default { components: { MyAsync } }
 
 
模板使用：二者完全一致， <MyNormal/>   <MyAsync/>

三、异步组件2种核心回调（基础/高级）

javascript 复制代码

js
  
// 基础版（项目最常用）
const AsyncBasic = () => import('./MyComponent.vue')
// 高级版（带加载/错误兜底）
const AsyncAdvance = () => ({
  component: import('./MyComponent.vue'),
  loading: () => import('./Loading.vue'),
  error: () => import('./Error.vue'),
  delay: 200, timeout: 3000
})

四、路由懒加载（异步组件的路由专属用法）

javascript 复制代码

js
  
const router = new VueRouter({
  routes: [
    // 普通路由（一次性加载）
    { path: '/normal', component: import('./MyNormal.vue') },
    // 路由懒加载（异步组件，按需加载）
    { path: '/async', component: () => import('./MyAsync.vue') }
  ]
})

五、异步组件的缓存规则

代码缓存：异步组件代码仅加载一次，首次触发回调后永久缓存，再次使用无需重新加载；
实例缓存：组件实例默认切走销毁，需用包裹实现实例缓存（普通/异步组件均适用）。

javascript 复制代码

vue
  
<!-- 缓存组件实例（普通/异步都能用） -->
<keep-alive>
  <MyAsync v-if="show"/>
  <router-view/> <!-- 路由组件缓存 -->
</keep-alive>

六、异步组件底层核心（理解用，项目不用）

javascript 复制代码

js
  
// resolve由Vue自动传入，加载完成后传递组件配置给Vue
const AsyncLow = (resolve) => {
  require(['./MyComponent.vue'], resolve)
}
Vue.component('AsyncLow', AsyncLow)

核心总结

普通组件一次性加载，异步组件按需加载，核心区别在代码加载时机；

异步组件全局/局部注册均传异步回调，仅可用范围不同，触发/缓存逻辑一致；

路由懒加载=异步组件的路由版，底层逻辑完全相同，省略显式组件名注册；

异步组件默认缓存代码，缓存实例，二者可配合使用。