vue 实现异步加载
Vue 实现异步加载的方法
使用动态 import 实现组件懒加载
在 Vue 中可以通过动态 import() 语法实现组件的异步加载，这会使得组件在需要时才被加载，减少初始加载时间。
const AsyncComponent = () => import('./AsyncComponent.vue')在路由配置中使用懒加载：
const router = new VueRouter({
routes: [
{ path: '/async', component: () => import('./AsyncComponent.vue') }
]
})结合 Suspense 处理异步组件
Vue 3 提供了 <Suspense> 组件来处理异步组件的加载状态，可以显示加载中的占位内容。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script>
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
)
</script>使用 defineAsyncComponent 定义异步组件
Vue 3 提供了 defineAsyncComponent 方法来更灵活地定义异步组件，可以配置加载状态和错误处理。
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent({
loader: () => import('./AsyncComponent.vue'),
loadingComponent: LoadingComponent,
errorComponent: ErrorComponent,
delay: 200,
timeout: 3000
})异步加载数据
在组件中可以使用 async/await 或 Promise 来实现数据的异步加载。
export default {
data() {
return {
posts: []
}
},
async created() {
this.posts = await fetch('/api/posts').then(res => res.json())
}
}使用 Vuex 异步 action
如果使用 Vuex 进行状态管理，可以在 actions 中执行异步操作。
const store = new Vuex.Store({
actions: {
async fetchPosts({ commit }) {
const posts = await fetch('/api/posts').then(res => res.json())
commit('SET_POSTS', posts)
}
}
})按需加载第三方库
对于大型第三方库，可以使用动态导入实现按需加载。
async function loadLibrary() {
const library = await import('heavy-library')
// 使用加载的库
}Webpack 魔法注释
在使用 Webpack 打包时，可以通过魔法注释为异步块命名并配置预加载。
const AsyncComponent = () => import(
/* webpackChunkName: "async-component" */
/* webpackPrefetch: true */
'./AsyncComponent.vue'
)
