1. 程式人生 > >開發vue延遲載入元件

開發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);
到此,大功告成!