開發vue延遲載入元件
vue的單頁面應用訪問速度一般情況下已經很快了,不過對於比較複雜的頁面首次開啟的時候會很慢,慢的原因呢主要涉及如下兩個方面:
1、dom元素較多,首次開啟時需要進行太多的渲染和判斷,而這些渲染和判斷大多數往往都不是首次開啟頁面時需要消耗的。
2、多數首次不顯示的的dom元素,或者子元件載入時會呼叫ajax請求載入資料,這時候首次載入的請求可能有5個、10個甚至更多,這時候併發請求就會帶來競爭,首次載入現實的可能只需要1-2個請求,時間花費30ms即可,但是一旦5-10個請求併發,那麼會導致整體請求時間要達到150ms以上,這時候的體驗效果是非常差的。
基於以上兩個原因呢,咱們需要引入延遲載入的機制,目前網上存在一些延遲載入的元件,但是功能和我們的需求會有些差別,不夠靈活,所以最好的方式是自己封裝元件,vue的api中已經寫的很清楚了,基於以下兩點,證明延遲載入的機制是可行的:
1、v-if預設為false情況下不會載入元件,只有變為true的情況下才會進行載入,而且我們的元件載入後不需要銷燬(https://cn.vuejs.org/v2/guide/conditional.html#v-if)
2、子元件可以通過插槽對父元件引用子元件包裹的內容進行分發。(https://cn.vuejs.org/v2/guide/components.html)
由以上兩點,我們開發了延遲載入元件(程式碼基於vue-cli的專案),子元件內容如下,命名pl-lazy:
<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() { let vm = this; setTimeout(function () { vm.initSuccess = true; }, (Number(vm.time || 0))); } } } </script> <style scoped> </style>
說明:子元件包含引數time,作為可設定的延遲載入時間,預設為0ms,非必填。
父元件呼叫:
1、在script中引入元件(如果開發工具使用的是idea的話,輸入<pl-lazy會自動生成如下引用):
import PlLazy from "./plLazy";
export default {
components: {
PlLazy
},
name: "test-lazy"
}
2、在需要延遲載入的元件上方巢狀<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);
到此,大功告成!