开发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);
到此,大功告成!
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页