Vue學習 深入剖析非同步元件

2021-10-09 09:58:42 字數 916 閱讀 4871

在專案中,有些元件不會在第一次進入首屏時載入,而是當執行了某些操作時,才會載入進來,所以此時,我們可以將該元件設定成非同步載入,什麼時候用,什麼時候再載入進來,以達到提公升首屏效能的目的。

使用方法:

>

"show = true"

>click<

/button>

<

async

-cmp1 v-if=

"show"

>

<

/async

-cmp1>

<

/div>

<

/template>

export

default

,data()

}}<

/script>

="async"

>

我是乙個不需要再首屏首次載入出來的元件1

將多個需要同時載入的元件合併到乙個檔案中:

一次載入多個資源容易造成資源浪費,可以進行合併然後一次載入

Vue學習 深入剖析計算屬性

有些時候,我們在模板中放入了過多的邏輯,從而導致模板過重,且難以維護。例如 碰到這樣的情況,我們必須看一段時間才能意識到,這裡是想要顯示變數message的翻轉字串,而且,一旦我們想要在模板中多次使用翻轉字串時,會更加麻煩。所以,當我們處理複雜邏輯時,都應該使用計算屬性。計算屬性是vue配置物件中的...

vue非同步元件

vue開發過程中,我們會做出特別多特別多的元件,包括login,header,footer,main等等。這樣使整個 看起來就十分的龐大,當我們在開啟網頁的時候,突然一下子把這些所有的元件載入上來,這麼多的請求全部同時開始請求,勢必會造成網頁開啟很慢,使客戶得到的是非常差勁的體驗。因此,vue為我們...

vue學習(六)非同步元件載入

首先準備 簡單的框架搭出來 doctype html html lang zh cn head meta charset utf 8 title 非同步元件載入 title meta name viewport content width device width initial scale 1 s...