作者:手机用户2602887787 | 来源:互联网 | 2023-05-19 05:35
为什么须要懒加载
vue的单页面利用访问速度通常情况下曾经很快了,不过对于比较复杂的页面首次关上的时候会很慢,慢的原因呢次要波及以下两个方面:
一、dom元素较多,首次关上时须要进行太多的渲染和判断,而这些渲染和判断大多数每每都不是首次关上页面时须要耗费的。
二、少数首次不显示的的dom元素,或者子组件加载时会调用ajax申请加载数据,这时候首次加载的申请可能有5个、10个甚至更多,这时候并发申请就会带来竞争,首次加载事实的可能只须要1-2个申请,工夫破费30ms便可,可是一旦5-10个申请并发,这时候的体验成果是很是差的。
解决形式
一、v-if
家喻户晓,v-if的指令在条件为false时是不渲染页面的,所以这个办法的确可用,然而如果说我的项目简单,组件太多,去每一个写v-if,多少有些麻烦。
二、子组件可能通过插槽对父组件援用子组件包裹的内容进行散发。
首先写一个PlLazy.vue组件
子组件蕴含参数time,做为可设置的提早加载工夫,默认为0ms,非必填
接下来是
一、父组件调用
import PlLazy from "./plLazy";
export default {
components: {
PlLazy
},
name: "test-lazy"
}
二、在须要提早加载的组件上方嵌套组件便可:
这里放的是提早加载的组件/dom内容
若是应用的中央比拟多的话,那么每一个页面都这样引入有点繁琐了,咱们须要公共引入组件,要达到这个成果只须要在main.js中引入组件便可:
// 注册全局组件
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);