Vue中key的作用

2022-07-06 14:18:10 字數 765 閱讀 6005

**官方文件

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

usernamelabel>

template>

emaillabel>

template>

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

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

email

toggle login type

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

usernamelabel>

template>

emaillabel>

template>

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

username

toggle login type

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

vue中key的作用

v for中為什麼要加key呢,這裡我給大家舉個栗子 沒有key text v model name add 新增 button div for item,i in list checkbox li ul 建立 vue 例項,得到 viewmodel var vm newvue methods th...

Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v for進行列表渲染的時候,如果不使用key屬性,vue會產生警告,那麼在這個時候key屬性的作用是什麼呢?官方文件中說 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移...

vue中key的作用

vue和react都實現了一套虛擬dom,使我們可以不直接操作dom元素,只運算元據便可以重新渲染頁面。其功勞歸功於背後高效的diff演算法。兩個相同的元件產生類似的dom結構,不同的元件產生不同的dom結構。同一層級的一組節點,他們可以通過唯一的id進行區分。當頁面的教據發生變化時,diff演算法...