Vue官方文件學習 動態元件和非同步元件

2021-10-19 23:27:21 字數 1007 閱讀 7110

當在多個元件之間進行切換(如選項卡)的時候,為了避免重複渲染導致的效能問題,可能會想對元件進行快取。比如在某個選項卡中選擇了某個選單閱讀某篇長文章,切換選項卡再切換回來,如果沒有保持元件狀態,選單將回到初始選中狀態。

v-bind:is

="currenttabcomponent"

>

component

>

在切換新標籤時,vue都建立了乙個新的currenttabcomponent

>

v-bind:is

="currenttabcomponent"

>

component

>

keep-alive

>

vue.

component

('async-example'

,function

(resolve, reject))}

,1000)}

)

vue.

component

('async-webpack-example'

,function

(resolve)

)

vue.

component

('async-webpack-example'

,// 這個動態匯入會返回乙個 `promise` 物件。()

=>

import

('./my-async-component'

))

new

vue(

})

const

asynccomponent=(

)=>

()

Vue官方文件學習 Prop

官方文件 html中的屬性名是大小寫不敏感的,故瀏覽器會把所有大小寫字元解釋為小寫字元,使用駝峰命名法的prop名需要使用其等價的kebab case 短橫線分隔命名 如果使用字串模板,則不存在這個限制。vue.component blog post post title hello blog po...

vue動態元件和 keep alive

所謂動態元件就是讓多個元件使用同乙個掛載點,並動態切換。is 用法 通過使用保留的元素,動態地繫結到它的 is 特性,我們讓多個元件可以使用同乙個掛載點,並動態切換。根據v bind is 元件名 元件名就會自動去匹配對應的元件,如果匹配不到,則不顯示。改變掛載的元件,只需要修改 is 屬性的值即可...

vue學習筆記之動態元件和v once指令簡單示例

點選按鈕時,自動切換兩個元件 當點選按鈕之後,會自動清除原來的元件,顯示新的元件。每一次切換,都需要銷毀 建立 但是這樣消耗有點大,所以我們在子元件中引用了v once指令,這樣可以將顯示在頁面中的元件存到記憶體中,不會完全銷毀。動態元件和v once指令 程式設計客棧 執行結果 感興趣的朋友可以使...