国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue動態組件和異步組件

nanchen2251 / 1311人閱讀

摘要：動態組件如果我們打算在一個地方根據不同的狀態引用不同的組件的話，比如頁，那么給我們提供動態組件。實現動態組件的加載。的值可以是一個已經注冊的組件的名字或者一個組件的選對象。

動態組件

如果我們打算在一個地方根據不同的狀態引用不同的組件的話，比如tab頁，那么Vue給我們提供動態組件。

基本使用

Parent.vue

運行結果如下圖：

當我們點擊不同的按鈕時，下面會切換不同的組件。實現動態組件的加載。is 的值可以是一個已經注冊的組件的名字或者一個組件的選對象。當我們點擊按鈕時，這個按鈕的 disabled 為 true 然后我們將給這個按鈕一個active 的css類,同時改變 currentCom 的值

keep-alive:動態組件的緩存

如果我們需要頻繁的切換頁面，每次都是在組件的創建和銷毀的狀態間切換，這無疑增大了性能的開銷。那么我們要怎么優化呢？
Vue提供了動態組件的 緩存。keep-alive 會在切換組件的時候緩存當前組件的狀態，等到再次進入這個組件，不需要重新創建組件，只需要從前面的緩存中讀取并渲染。

Parent.vue(其余地方代碼和上面一樣)

Childs1.vue

Childs2.vue

運行結果如下圖：

"

對比：如果我們將去掉，運行結果如下圖：


前一組圖片在切換組件的時候，title從1加到3，然后等下次再切換回來的時候,title還是停留在3，從控制臺可以看出，Childs1.vue這個組件的mounted的鉤子函數只有一次。后一組圖片，title一開始加到3，下一次進入這個組件的時候title又從1開始，控制臺圖片也顯示這個組件經歷個了多次鉤子函數，說明組件是銷毀重建的。

tips:因為緩存的組件只需要建立一次，所以如果我們要在每次進入組件的鉤子函數里面做相應的操作的時候，會出現問題，所以請明確我們使用的場景，避免出現bug

異步組件

異步組件存在的意義在于加載一個體量很大的頁面時，如果我們不設置加載的優先級的話，那么可能頁面在加載視頻等信息的時候會非常占用時間，然后主要信息就會阻塞在后面在加載。這對用戶來說無疑不是一個很差的體驗。但是如果我們設置加載的順序，那么我們可以優先那些最重要的信息優先顯示，優化了整個項目。一般來說我們是將加載組件和 路由 （vue-router）配合在一起使用，所以這里我就不細講了，具體學習可以參考官網來進行學習。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101408.html

相關文章

  • Vue動態加載異步組件

    摘要：目前采用動態加載異步組件的方式來實現小組件之間的通信。內容使用過的都應該知道的動態加載組件通過來綁定需要加載的組件。總結本篇主要借助的動態組件和打包單文件來實現動態加載異步組件，通過的事件總線掛載在上來實現平級組件之間的通信。 背景： 目前我們項目都是按組件劃分的，然后各個組件之間封裝成產品。目前都是采用iframe直接嵌套頁面。項目中我們還是會碰到一些通用的組件跟業務之間有通信，這種...

    awesome23 評論0 收藏0

  • VueJS 如何編譯服務器端遠程模板【異步組件+簡單方法】

    摘要：，常規組件，卒。小結總之呢，上面分析了在中編譯遠程模板的可能性，最后得出了兩種方法異步組件，應該是官方的推薦方法動態組件，變通之法，論壇上發現的思路當然如果有其他方法歡迎交流，本文如果有不嚴謹不正確的地方也歡迎指出本文發自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...

    褰辯話 評論0 收藏0

  • VueJS 如何編譯服務器端遠程模板【異步組件+簡單方法】

    摘要：，常規組件，卒。小結總之呢，上面分析了在中編譯遠程模板的可能性，最后得出了兩種方法異步組件，應該是官方的推薦方法動態組件，變通之法，論壇上發現的思路當然如果有其他方法歡迎交流，本文如果有不嚴謹不正確的地方也歡迎指出本文發自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...

    2i18ns 評論0 收藏0

  • 利用VUE異步組件、動態加載組件，實現自定義組件順序、動態綁定傳入子組件的props、動態綁定監聽子

    摘要：發現了動態組件異步組件這個東西簡直是救命啊動態組件異步組件思路分析有了動態組件這個東西之后，我們就可以根據綁定不同的值來渲染不同的組件。每個組件要傳給子組件的值和接收子組件的事件也可以動態的綁定上去。 推動我實現這個功能的業務背景 最近接到一個讓我很頭疼的需求：產品要求我們系統頁面上所有的模塊都支持順序的變動。比如有 模塊A、B、C、D，可以無序的展示在頁面上，我剛聽到這個需求的時候我...

    marser 評論0 收藏0

  • Vue.js的動態組件模板

    摘要：實例組件模板某些網頁中用于多個位置，例如通知，注釋和附件。動態組件模板另一種方法是使用某種加載器來加載您需要的模板。那么這里發生了什么默認情況下，支持動態組件。超級方便安裝我們的組件后，我們嘗試加載模板。 組件并不總是具有相同的結構。有時需要管理許多不同的狀態。異步執行此操作會很有幫助。 實例： 組件模板某些網頁中用于多個位置，例如通知，注釋和附件。讓我們來一起看一下評論，看一下我表達...

    Richard_Gao 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<