美文网首页Vue
vue开发 --- 页面延迟加载组件

vue开发 --- 页面延迟加载组件

作者: 七號7777 | 来源:发表于2020-11-06 13:58 被阅读0次

    问题:单页面引入的组件页面多,多数首次不显示的的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);
    

    相关文章

      网友评论

        本文标题:vue开发 --- 页面延迟加载组件

        本文链接:https://www.haomeiwen.com/subject/qgttbktx.html