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