Vue中的非同步元件

2021-09-24 15:31:37 字數 751 閱讀 1546

使用過vue 的小夥伴都知道vue自定義元件,和元件引入方式。今天筆者要記錄並介紹vue 元件的三種引入方式。

傳統引入方式,即最常見的引入方式

import leftline from "@/views/admanage/components/stepline";

components: ,

這是使用本地註冊的方式將元件引入,在專案初始載入時,元件就被引入、使用、載入

當專案越來越大的時候,就需要考慮速度效能的問題,顯然上面的方法是不合理的,這就需要用下面的兩種方法了

2.import方式

components: ,
使用() => import('@/views/admanage/components/stepline')替代前面示例中的import tooltip from "@/views/admanage/components/stepline"。vue一旦請求渲染將會延遲載入該元件。

延遲一定時間載入元件,

const leftline= () => ()
可以自定義延遲時間,預設的延遲時間是200ms,200毫秒之後載入元件line.如果載入錯誤,則會載入errorcom元件。

3. 按需引入方式

components: ,
這種方式和import直接引入的方式相差不多,不在多說。

vue非同步元件

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

Vue的非同步元件

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

vue動態元件 非同步元件

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