component標(biāo)簽渲染問題

最近遇到一個(gè)問題，就是通過LoadJs方法加載的組件怎么通過component實(shí)現(xiàn)熱加載問題

vue的component標(biāo)簽是個(gè)虛擬dom,在真實(shí)dom樹上需要vue進(jìn)行渲染，顯示。而我最近遇到的問題，我通過LoadJS方法，從A項(xiàng)目讀取B項(xiàng)目的對(duì)象，頁面并已組件的形式渲染到A項(xiàng)目頁面上，組件沒法渲染。

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

然后想到一個(gè)問題VUE如何識(shí)別加載虛擬DOM和如何識(shí)別路由里綁定的頁面？import對(duì)象和require對(duì)象有什么區(qū)別，什么時(shí)候用

想了一堆這類的問題，實(shí)際上import和require的區(qū)別，好多文章都有說明，而且解釋的很好。個(gè)人看來最大的區(qū)別就是一個(gè)是靜態(tài)編譯和一個(gè)動(dòng)態(tài)編譯。也就是一個(gè)腳本運(yùn)行完后編譯。

所以我這里應(yīng)該是動(dòng)態(tài)編譯，因?yàn)橥獠縅s文件在是一個(gè)blob對(duì)象，無法根據(jù)import，指定路徑，運(yùn)行時(shí)候在訪問對(duì)應(yīng)的Js文件。也就是這個(gè)路徑是個(gè)虛擬的，無法真實(shí)找到的時(shí)候，不要用import。

vue如何識(shí)別import對(duì)象和require對(duì)象

• require是CommonJs的語法（AMD規(guī)范引入方式），CommonJs的模塊是對(duì)象。
• import是es6的一個(gè)語法標(biāo)準(zhǔn)（瀏覽器不支持，本質(zhì)是使用node中的babel將es6轉(zhuǎn)碼為es5再執(zhí)行，import會(huì)被轉(zhuǎn)碼為require），es6模塊不是對(duì)象
• require是運(yùn)行時(shí)加載整個(gè)模塊（即模塊中所有方法），生成一個(gè)對(duì)象，再從對(duì)象上讀取它的方法（只有運(yùn)行時(shí)才能得到這個(gè)對(duì)象,不能在編譯時(shí)做到靜態(tài)化），理論上可以用在代碼的任何地方
• import是編譯時(shí)調(diào)用，確定模塊的依賴關(guān)系，輸入變量（es6模塊不是對(duì)象，而是通過export命令指定輸出代碼，再通過import輸入，只加載import中導(dǎo)的方法，其他方法不加載），import具有提升效果，會(huì)提升到模塊的頭部（編譯時(shí)執(zhí)行）
• export和import可以位于模塊中的任何位置，但是必須是在模塊頂層，如果在其他作用域內(nèi)，會(huì)報(bào)錯(cuò)

這算解決了一個(gè)問題，可是component的Is屬性時(shí)可以識(shí)別require和import對(duì)象，我直接丟進(jìn)去，可是還是不行。

然后注意到一個(gè)點(diǎn)，VUE的生命周期！

然后發(fā)現(xiàn)我實(shí)在mounted導(dǎo)入的對(duì)象。。。。。。

提醒一下自己和看到的人，請(qǐng)不要在mounteds使用require和import，我改到created里面執(zhí)行函數(shù)就可以。理論來說beforeCreated和beforeMounted也可以使用。未嘗試過。

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

component組件嵌套,導(dǎo)致頁面重復(fù)渲染,重復(fù)請(qǐng)求的bug

因詳情頁面，有多個(gè)tab選項(xiàng)卡考慮頁面多處重復(fù)使用，而且有多個(gè)頁面組成，最終決定使用 組件方式來引用頁面。

因 項(xiàng)目采用的UI組件是 element-ui，剛好看到有一個(gè) 樣式很類似于 tab選項(xiàng)卡，就采用了 element的 tabs組件，可是 沒想到問題就是出現(xiàn) 這兒。

錯(cuò)誤代碼

<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>

因?yàn)樯鲜霾捎昧?tabs選項(xiàng)卡，而且也使用 v-for循環(huán)（沒辦法，主要是 tabs是動(dòng)態(tài)的），導(dǎo)致 每個(gè)頁面不僅沒有辦法 緩存，反而 一直重復(fù)發(fā)送請(qǐng)求。自己百度了好久，最后沒辦法尋求幫助，在大佬們 遠(yuǎn)程幫助下 最終發(fā)現(xiàn)的是 tabs下的 v-for導(dǎo)致。

因?yàn)?component 寫在v-for循環(huán)中，每次循環(huán)都會(huì) 創(chuàng)建一個(gè) 對(duì)象，導(dǎo)致創(chuàng)建很多的組件，點(diǎn)擊一次tabs 循環(huán)后的 所有的 component都 發(fā)送了請(qǐng)求，每次點(diǎn)擊一次后，都會(huì)減少一次請(qǐng)求（因?yàn)?keep-alive緩存的問題）。

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

正確代碼

<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>

這樣的就可以避免創(chuàng)建多個(gè)組件，從而不在出現(xiàn) 重復(fù)發(fā)送請(qǐng)求的bug。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。