vue非同步元件

2021-08-14 21:42:10 字數 933 閱讀 8965

vue開發過程中,我們會做出特別多特別多的元件,包括login,header,footer,main等等。

這樣使整個**看起來就十分的龐大,當我們在開啟網頁的時候,突然一下子把這些所有的元件載入上來,這麼多的請求全部同時開始請求,勢必會造成網頁開啟很慢,使客戶得到的是非常差勁的體驗。

因此,vue為我們專門設立了非同步元件,通過非同步元件,我們可以得到兩點好處:

1 用不到的元件不會載入,因此網頁開啟速度會很快,當你用到這個元件的時候,才會通過非同步請求進行載入;

2 快取元件,通過非同步載入的元件會快取起來,當你下一次再用到這個元件時,絲毫不會有任何的疑遲,元件很快會從快取中載入出來。

vue鼓勵我們在vue中使用函式來標誌component屬性的值。通常我們有兩種方式可以實現非同步的元件:

//在元件中,我們通過在components屬性中使用import()函式返回乙個

//promise

components: ,

//在router中,我們也可以這麼做,但也可以使用nodejs的require函式來實現

//返回乙個resolve

//logincomponent

},

總結說來,就是目前有兩種語法形式:

1

component: () =>

import('/component_url/');

2component: (resolve) =>

但目前看來,還是第一種語法用起來比較直觀。

可以用到非同步元件的地方:

1 元件中,元件中需要子元件的位置,我們就可以使用非同步元件形式

2 路由中,一般我們開啟乙個頁面時,其總是會進入其中乙個預設的路由,那麼其他路由在用不到的時候就沒必要繼續載入,當跳轉到當前路由的時候,再來載入,這裡也是使用非同步元件非常恰當的地方。

vue動態元件 非同步元件

重新建立動態元件的行為通常是非常有用的,但是在這個案例中,我們更希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來。為了解決這個問題,我們可以用乙個元素將其動態元件包裹起來。v bind is currenttabcomponent component keep alive 注意 這個要求...

Vue的非同步元件

建議使用webpack browserify在預設情況下不支援 首先上官網說明 非同步元件 雖然說明是沒問題的,但是示例中的寫法怪怪的,不符合一般新手學習者在實際使用中的習慣。嗯,換句話說,這段 告訴你,通過這種方式引入非同步元件,然後他漏掉了一些內容,比如說賦值,如何使用之類。官方示例 vue.c...

Vue中的非同步元件

使用過vue 的小夥伴都知道vue自定義元件,和元件引入方式。今天筆者要記錄並介紹vue 元件的三種引入方式。傳統引入方式,即最常見的引入方式 import leftline from views admanage components stepline components 這是使用本地註冊的方式...