异步组件
按需引入,用到的时候再加载,异步组件的引入需要用defineAsyncComponent
进行注册。defineAsyncComponent
工厂函数需要返回一个Promise对象,接收对象类型,对异步函数进行设置。
监控异步组件的显示
组件中的数据,需要在用到的时候再去加载,实现数据懒加载,可以用第三方插件@vueuse/core
为我们提供的useIntersectionObserver
方法。首先安装
该方法包括三个参数:
- 参数1:ref引用,获取DOM,需要是组件的最外层div元素;
- 参数2:回调,回调里面的参数 isIntersecting 监听组件是否进入可视区域
- 参数3:DOM 元素进入可视区域的距离从 0 – 1。
内置组件Suspense
异步组件请求数据时需要用到内置组件
,Suspense是vue3推出的一个内置组件,在等待异步组件时渲染一些后备的内容。它提供了两个slot插槽,一个default默认,一个fallback加载中的状态。
vue.2.x与vue3.x异步组件的区别
vue中加载异步组件其实在vue2.x中已经有了,我们用的vue-router中加载的路由组件其实也是一个异步组件。
- vue 3.x 新增一个辅助函数
defineAsyncComponent
,用来显示声明异步组件; - 异步组件高级声明方法中的 component 选项更名为loader;
- loader绑定的组件加载函数不再接收resolve和reject参数,而且必须返回一个Promise;
vue2.x
vue3.x
易出错点:
- 异步组件中有异步请求数据时必须要使用
,否则会报错,影响异步组件显示。 - 使用
可以直接使用await
,因为
默认就是异步的,相当于async setup(){}
,所以可以直接在里面写await,而在使用setup函数时,需要async await
一起使用。
c.vue
home.vue
异步组件分包机制
- 组件A、组件C异步引入后打包会从index.js分离开来
- 组件A、B、C直接引入,打包后内容全在index.js中
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net