資訊專欄INFORMATION COLUMN
摘要：動態(tài)組件如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如頁，那么給我們提供動態(tài)組件。實(shí)現(xiàn)動態(tài)組件的加載。的值可以是一個已經(jīng)注冊的組件的名字或者一個組件的選對象。
動態(tài)組件
如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如tab頁，那么Vue給我們提供動態(tài)組件。
基本使用Parent.vue
{{btn.name}}
運(yùn)行結(jié)果如下圖：
當(dāng)我們點(diǎn)擊不同的按鈕時，下面會切換不同的組件。實(shí)現(xiàn)動態(tài)組件的加載。is 的值可以是一個已經(jīng)注冊的組件的名字或者一個組件的選對象。當(dāng)我們點(diǎn)擊按鈕時，這個按鈕的 disabled 為 true 然后我們將給這個按鈕一個active 的css類,同時改變 currentCom 的值
keep-alive:動態(tài)組件的緩存如果我們需要頻繁的切換頁面，每次都是在組件的創(chuàng)建和銷毀的狀態(tài)間切換，這無疑增大了性能的開銷。那么我們要怎么優(yōu)化呢？
Vue提供了動態(tài)組件的 緩存。keep-alive 會在切換組件的時候緩存當(dāng)前組件的狀態(tài)，等到再次進(jìn)入這個組件，不需要重新創(chuàng)建組件，只需要從前面的緩存中讀取并渲染。
Parent.vue(其余地方代碼和上面一樣)
{{btn.name}}
Childs1.vue
{{title}}
Childs2.vue
Childs2
運(yùn)行結(jié)果如下圖：
"
對比：如果我們將
前一組圖片在切換組件的時候，title從1加到3，然后等下次再切換回來的時候,title還是停留在3，從控制臺可以看出，Childs1.vue這個組件的mounted的鉤子函數(shù)只有一次。后一組圖片，title一開始加到3，下一次進(jìn)入這個組件的時候title又從1開始，控制臺圖片也顯示這個組件經(jīng)歷個了多次鉤子函數(shù)，說明組件是銷毀重建的。
tips:因為緩存的組件只需要建立一次，所以如果我們要在每次進(jìn)入組件的鉤子函數(shù)里面做相應(yīng)的操作的時候，會出現(xiàn)問題，所以請明確我們使用的場景，避免出現(xiàn)bug
異步組件異步組件存在的意義在于加載一個體量很大的頁面時，如果我們不設(shè)置加載的優(yōu)先級的話，那么可能頁面在加載視頻等信息的時候會非常占用時間，然后主要信息就會阻塞在后面在加載。這對用戶來說無疑不是一個很差的體驗。但是如果我們設(shè)置加載的順序，那么我們可以優(yōu)先那些最重要的信息優(yōu)先顯示，優(yōu)化了整個項目。一般來說我們是將加載組件和 路由 （vue-router）配合在一起使用，所以這里我就不細(xì)講了，具體學(xué)習(xí)可以參考官網(wǎng)來進(jìn)行學(xué)習(xí)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101408.html
摘要：目前采用動態(tài)加載異步組件的方式來實(shí)現(xiàn)小組件之間的通信。內(nèi)容使用過的都應(yīng)該知道的動態(tài)加載組件通過來綁定需要加載的組件?？偨Y(jié)本篇主要借助的動態(tài)組件和打包單文件來實(shí)現(xiàn)動態(tài)加載異步組件，通過的事件總線掛載在上來實(shí)現(xiàn)平級組件之間的通信。 背景： 目前我們項目都是按組件劃分的，然后各個組件之間封裝成產(chǎn)品。目前都是采用iframe直接嵌套頁面。項目中我們還是會碰到一些通用的組件跟業(yè)務(wù)之間有通信，這種...
摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠(yuǎn)程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴(yán)謹(jǐn)不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...
摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠(yuǎn)程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴(yán)謹(jǐn)不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...
摘要：發(fā)現(xiàn)了動態(tài)組件異步組件這個東西簡直是救命啊動態(tài)組件異步組件思路分析有了動態(tài)組件這個東西之后，我們就可以根據(jù)綁定不同的值來渲染不同的組件。每個組件要傳給子組件的值和接收子組件的事件也可以動態(tài)的綁定上去。 推動我實(shí)現(xiàn)這個功能的業(yè)務(wù)背景 最近接到一個讓我很頭疼的需求：產(chǎn)品要求我們系統(tǒng)頁面上所有的模塊都支持順序的變動。比如有 模塊A、B、C、D，可以無序的展示在頁面上，我剛聽到這個需求的時候我...
摘要：實(shí)例組件模板某些網(wǎng)頁中用于多個位置，例如通知，注釋和附件。動態(tài)組件模板另一種方法是使用某種加載器來加載您需要的模板。那么這里發(fā)生了什么默認(rèn)情況下，支持動態(tài)組件。超級方便安裝我們的組件后，我們嘗試加載模板。 組件并不總是具有相同的結(jié)構(gòu)。有時需要管理許多不同的狀態(tài)。異步執(zhí)行此操作會很有幫助。 實(shí)例： 組件模板某些網(wǎng)頁中用于多個位置，例如通知，注釋和附件。讓我們來一起看一下評論，看一下我表達(dá)...
閱讀 1819·2021-10-27 14:15
閱讀 3950·2021-10-08 10:12
閱讀 1217·2021-09-22 15:55
閱讀 3272·2021-09-22 15:17
閱讀 893·2021-09-02 15:40
閱讀 1787·2019-08-29 18:33
閱讀 1136·2019-08-29 15:22
閱讀 2393·2019-08-29 11:08
