vue 用 key 管理可復用的元素

2022-03-31 10:58:08 字數 739 閱讀 8872

vue 會盡可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染。這麼做除了使 vue 變得非常快之外,還有其它一些好處。例如,如果你允許使用者在不同的登入方式之間切換:

usernamelabel>

template>

emaillabel>

template>

那麼在上面的**中切換logintype將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素,不會被替換掉——僅僅是替換了它的placeholder

自己動手試一試,在輸入框中輸入一些文字,然後按下切換按鈕:

username

toggle login type

這樣也不總是符合實際需求,所以 vue 為你提供了一種方式來表達「這兩個元素是完全獨立的,不要復用它們」。只需新增乙個具有唯一值的key屬性即可:

usernamelabel>

template>

emaillabel>

template>

現在,每次切換時,輸入框都將被重新渲染。請看:

username

toggle login type

注意,元素仍然會被高效地復用,因為它們沒有新增key屬性。

Vue的條件渲染之用key管理可復用的元素

vue為了更高效地渲染元素,採用了復用元素機制,這樣做是為了高效以及一些其他的好處。例 官網 v if logintype username usernamelabel placeholder enter your username template v else emaillabel placeh...

Vue可復用的過渡

過渡可以通過 vue 的元件系統實現復用。要建立乙個可復用過渡元件,你需要做的就是將或者作為根元件,然後將任何子元件放置在其中就可以了。使用template的簡單例子 vue.component my special transition afterenter function el 函式式元件更適...

Vue的 v for 中 key 有什麼用

我們知道,vue和react都實現了一套虛擬dom,使我們可以不直接操作dom元素,只運算元據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的diff演算法。vue和react的虛擬dom的diff演算法大致相同,其核心是基於兩個簡單的假設 1.兩個相同的元件產生類似的dom結構,不同的元件產生不...