如何解決vue的component標簽渲染問題

這篇文章主要介紹了如何解決vue的component標簽渲染問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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。

vue如何識別import對象和require對象

• 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也可以使用。未嘗試過。

還有提醒一下，思考一個問題，不要鉆牛角尖，換個思路，說不定豁然開朗，就像我這個問題。其實主要問題就是，導入對象的時期和導入的方法選擇，而不是渲染。

component組件嵌套,導致頁面重復渲染,重復請求的bug

因詳情頁面，有多個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">
          <component :is="currentComponent" :customeroid="agencyid"></component>
      </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"></component>
</keep-alive>

這樣的就可以避免創建多個組件，從而不在出現 重復發送請求的bug。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決vue的component標簽渲染問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!