Vue中列表渲染指令中key屬性的理解

2021-08-22 13:19:50 字數 378 閱讀 8735

在官網中看到v-for指令中key這一塊時,對其感覺懵懵懂懂,查閱了一些資料,把自己的理解記錄下來,做乙個心得,不知道理解的對不對,希望有大牛指導。

vue在更新v-for指令渲染過的html時,採用的是就地復用策略,也就是已有的html元素不在重新渲染,直接更新部分資料,這對簡單的html來說沒有影響,因為最終的展示效果同**寫出來的一樣,但是如果使用複雜的模板元件時,如模板元素都一樣,但是對每個模板都有乙個操作按鈕操作當前資料資訊,沒有繫結key元素的話,就區分不出每個元素的唯一性。

回過頭來再看自己之前的理解發現有偏差,原來key的作用是用來標識就地復用的dom結構的唯一性。已經渲染過的dom元素相當於給它乙個唯一屬性key,如果新增加的dom元素的唯一屬性key值已存在,就會復用之前的dom元素。

Vue條件渲染指令 v if 和 v show

條件渲染,即根據一定的條件來判斷是否渲染當前頁面。v if isshow v if,isshow為true時p div newvue script 結果如下 改變isshow的值之後,就會發生變化。用於表達v if的else部分。v if isshow v if,isshow為true時 1p 2p...

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充...

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充...