问题:单页面引入的组件页面多,多数首次不显示的的dom元素,导致进入页面的时候加载慢。
参考的解决文档: https://blog.csdn.net/z470259742/article/details/79580592
解决:
1、v-if默认为false情况下不会加载组件,只有变为true的情况下才会进行加载,而且我们的组件加载后不需要销毁(我试过v-if有时候很还是会慢很多)
2、子组件可以通过插槽对父组件引用子组件包裹的内容进行分发
第二个解决方法的具体实现:
说明:子组件包含参数time,作为可设置的延迟加载时间,默认为0ms,非必填。
子组件:
<template>
<span>
<slot v-if="initSuccess"></slot>
</span>
</template>
<script>
export default {
name: "pl-lazy",
props: {
time: {
required: false,
default: 0
}
},
data() {
return {
initSuccess: false
}
},
created() {
this.initSlot();
},
methods: {
initSlot() {
setTimeout(()=> {
this.initSuccess = true;
}, (Number(this.time || 0)));
}
}
}
</script>
父组件:
<pl-lazy time="200">
这里放的是延迟加载的组件/dom内容
</pl-lazy>
import PlLazy from "./plLazy";
export default {
components: {
PlLazy
},
name: "test-lazy"
}
如果使用的地方比较多的话,那么每个页面都这样引入有点繁琐了,咱们需要公共引入组件,这样我们就可以更方便的使用了,要达到这个效果只需要在main.js中引入组件即可:
// 注册全局组件
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);
网友评论