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