vue项目组件加载与销毁


一、vue组件的加载用v-if控制,组件关闭时销毁组件。

示例:

template

 

< div v-if=" dataObj. type=== 0" >
<!-- 任务详情 -->
< Drawer
  :closable=" false"
  :mask-closable=" isClosable"
   v-model=" showDrawer"
   width= "700"
   :style="{ padding: 0}"
   @on-close=" closeDrawer"
>

script

 

 

closeDrawer() {
  this. showDrawer = false;
  setTimeout(() => {
    this. dataObj. type = null;
  }, 500);
}

当type==0时,dom加载当前组件,当数据加载完毕时,showDrawer=true,侧边栏显示。

 

当侧边栏关闭时,type=null,组件从dom中删除,不占用资源。

二、页面加载时,公共组件延迟加载,可加快页面加载速度

例如:这个是任务详情的组件

 

< task-detal :dataObj=" dataObj" v-if=" showCompnent" @refresh=" renderData" ></ task-detal >
setTimeout(() => {
    self. showCompnent = true;
}, 500);

页面加载完毕,组件延迟500秒加载。

 

三、每个页面请求数据

1、使用vuex存储路由,等于当前路由时,加载当前页面的数据。

存储方法  http://192.168.1.2:8989/webdoc/view/Pub40288182683a623e01683ab8b970000e.html?STATE=0&OPERATE=3

mounted() {
   if( this. $store. state. link == '/board'){
     var self = this;
     this. getTaskBoard();
     this. userInfo = this. $app. userInfo;
     setTimeout(() => {
        self. showCompnent = true;
     }, 500);
   }
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM