解決vue的component標籤渲染問題的方法

導讀	這篇文章主要介紹瞭解決vue的component標籤渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

最近遇到一個問題，就是透過LoadJs方法載入的元件怎麼透過component實現熱載入問題

vue的component標籤是個虛擬dom,在真實dom樹上需要vue進行渲染，顯示。而我最近遇到的問題，我透過LoadJS方法，從A專案讀取B專案的物件，頁面並已元件的形式渲染到A專案頁面上，元件沒法渲染。

我第一反應 是this.$forceUpdate()，渲染一下就是，可是並沒有成功。

然後想到一個問題VUE如何識別載入虛擬DOM和如何識別路由裡繫結的頁面？import物件和require物件有什麼區別，什麼時候用

想了一堆這類的問題，實際上import和require的區別，好多文章都有說明，而且解釋的很好。個人看來最大的區別就是一個是靜態編譯和一個動態編譯。也就是一個 執行完後編譯。

所以我這裡應該是動態編譯，因為外部Js檔案在是一個blob物件，無法根據import，指定路徑，執行時候在訪問對應的Js檔案。也就是這個路徑是個虛擬的，無法真實找到的時候，不要用import。

require是CommonJs的語法（AMD規範引入方式），CommonJs的模組是物件。

import是es6的一個語法標準（瀏覽器不支援，本質是使用node中的babel將es6轉碼為es5再執行，import會被轉碼為require），es6模組不是物件

require是執行時載入整個模組（即模組中所有方法），生成一個物件，再從物件上讀取它的方法（只有執行時才能得到這個物件,不能在編譯時做到靜態化），理論上可以用在程式碼的任何地方

import是編譯時呼叫，確定模組的依賴關係，輸入變數（es6模組不是物件，而是透過export 指定輸出程式碼，再透過import輸入，只載入import中導的方法，其他方法不載入），

import具有提升效果，會提升到模組的頭部（編譯時執行）

export和import可以位於模組中的任何位置，但是必須是在模組頂層，如果在其他作用域內，會報錯

這算解決了一個問題，可是component的Is屬性時可以識別require和import物件，我直接丟進去，可是還是不行。

然後注意到一個點，VUE的生命週期！

然後發現我實在mounted匯入的物件。。。。。。提醒一下自己和看到的人，請不要在mounteds使用require和import，我改到created裡面執行函式就可以。理論來說beforeCreated和beforeMounted也可以使用。未嘗試過。還有提醒一下，思考一個問題，不要鑽牛角尖，換個思路，說不定豁然開朗，就像我這個問題。其實主要問題就是，匯入物件的時期和匯入的方法選擇，而不是渲染。

因詳情頁面，有多個tab選項卡考慮頁面多處重複使用，而且有多個頁面組成，最終決定使用 元件方式來引用頁面。

因 專案採用的UI元件是 element-ui，剛好看到有一個 樣式很類似於 tab選項卡，就採用了 element的 tabs元件，可是 沒想到問題就是出現 這兒。

< el-tabs class="header-tabs" v-model="activeName" @tab-click="handleClick">
   < el-tab-pane
     v-for="item of tabs"
     :key="item.id"
     :label="item.label"
     :name="item.id"
     :component="item.component"
     lazy
     >
      < keep-alive exclude="ContentManage">< /keep-alive>
     < /el-tab-pane>
< /el-tabs>

因為上述採用了 tabs選項卡，而且也使用 v-for迴圈（沒辦法，主要是 tabs是動態的），導致 每個頁面不僅沒有辦法 快取，反而 一直重複傳送請求。自己百度了好久，最後沒辦法尋求幫助，在大佬們 遠端幫助下 最終發現的是 tabs下的 v-for導致。

因為 component 寫在v-for迴圈中，每次迴圈都會 建立一個 物件，導致建立很多的元件，點選一次tabs 迴圈後的 所有的 component都 傳送了請求，每次點選一次後，都會減少一次請求（因為 keep-alive快取的問題）。

最終解決的方法，不在 element-ui的 tabs元件，自己手寫頁面，反正樣式不復雜。

< ul class="tabs-ul">
    < li
        v-for="(item) in currentTabs"
        :key="item.id"
        :class="{ active: tabSelect === item.id }"
        @click.prevent="changetabs(item.id)"
        >
        {{ item.label }}
    < /li>
< /ul>
< keep-alive exclude="ContentManage">
    < component :is="currentComponent" :customeroid="agencyid">
< /keep-alive>

這樣的就可以避免建立多個元件，從而不在出現 重複傳送請求的bug。

原文來自：