郑州春蕾网站建设,网上商城的意义,网站设计要如何做支付功能,烟台百度推广公司组件懒加载
前言 组件懒加载最常用于异步加载大型/复杂组件或在需要时才进行加载 Vue 2和Vue 3均支持组件懒加载#xff0c;本文将介绍如何在Vue 2和Vue 3中实现组件懒加载#xff0c;和一些使用场景 1️⃣方法一#xff1a;使用Webpack的代码分割能力
Vue 2和Vue 3都可以…组件懒加载
前言 组件懒加载最常用于异步加载大型/复杂组件或在需要时才进行加载 Vue 2和Vue 3均支持组件懒加载本文将介绍如何在Vue 2和Vue 3中实现组件懒加载和一些使用场景 1️⃣方法一使用Webpack的代码分割能力
Vue 2和Vue 3都可以使用但构建打包后才能生效
const dialogInfo () import(/* webpackChunkName: dialogInfo */ /components/dialogInfo);然后就可以在需要使用该组件的地方像使用普通组件一样引入即可
templatedivh1按需加载示例/h1dialogInfo //div
/template2️⃣方法二使用Vue异步组件
Vue2使用
在 Vue 2 中可以使用 Vue.component() 方法来注册异步组件其中异步组件选项是一个返回包含组件信息的对象的函数。具体使用方式如下
//基本用法
Vue.component(async-component, () import(./MyComponent.vue))
//高阶用法
const AsyncComponent () ({// 异步方法返回要加载的组件component: import(./MyComponent.vue),// 组件加载期间显示的组件loading: LoadingComponent,// 加载出错时显示的组件error: ErrorComponent,// 延迟显示加载状态以毫秒为单位。默认值200。delay: 200,// 等待时间长度等于或超过 delayloadingComponent 将被渲染。如果设置为 0则始终呈现loadingComponent。timeout: 3000
});
Vue.component(async-component, AsyncComponent);在上述示例中我们使用 Vue.component() 方法将名为 async-component 的异步组件注册到全局组件库中。对于高阶用法我们定义了一个包装器函数 AsyncComponent()它返回一个包含组件相关信息的对象。
Vue3使用
在 Vue 3 中推荐使用 defineAsyncComponent() 函数来定义异步组件。该函数接受一个参数即异步组件选项或动态导入方法并返回一个组件实例。具体使用方式如下
import { defineAsyncComponent } from vue;
//基本用法
const AsyncComponent defineAsyncComponent(() import(./MyComponent.vue))
//高阶用法
const AsyncComponent defineAsyncComponent({// 异步方法返回要加载的组件loader: () import(./MyComponent.vue),// 组件加载期间显示的组件loadingComponent: LoadingComponent,// 加载出错时显示的组件errorComponent: ErrorComponent,// 如果设置为 true将使用Suspense包装该组件。默认值false。suspense: false,// 延迟显示加载状态以毫秒为单位。默认值200。delay: 200,// 等待时间长度等于或超过 delayloadingComponent 将被渲染。如果设置为 0则始终呈现loadingComponent。timeout: 3000,
})在上述示例中我们使用 defineAsyncComponent() 函数将名为 AsyncComponent 的异步组件定义为一个返回加载组件的函数。与 Vue 2 不同的是在 Vue 3 中异步组件选项可以是一个对象而不仅仅是一个返回对象的函数。
在 Vue 3 中使用 defineAsyncComponent() 定义包装了 Suspense 的异步组件的示例代码
import { defineAsyncComponent } from vue;const AsyncComponent defineAsyncComponent({loader: () import(./MyComponent.vue),suspense: true,delay: 200
});// 在模板中使用异步组件
templateSuspensetemplate #defaultAsyncComponent //templatetemplate #fallback!-- 加载中的提示 --/template/Suspense
/template无论是 Vue 2还是 Vue 3一旦异步组件注册成功就可以像普通组件一样进行使用 3️⃣组件懒加载的使用场景
有时资源拆分的过细也不好可能会造成浏览器http请求的增多
总结出三种适合组件懒加载的场景
JS 文件体积大的页面在加载复杂的页面时将某些组件定义为异步可以显著提高页面的加载速度按需触发的组件只有在该组件真正需要使用时才去加载相应的资源从而避免不必要及浪费的加载多页面复用的组件对于包含大量数据的长列表您可能希望只在需要滚动到屏幕上的部分时才加载列表
结语 感谢读者阅读并关注博客文章并对文章中提到的观点、建议或批评表示感谢
