亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

為什么vue中的v-for key值不推薦使用index

qqlcbb / 1261人閱讀

摘要：如果我們使用做在我們渲染到頁面的時候變成如果我們要在中間插入一條數(shù)組，，因為我們是已為值，所以當我們向數(shù)組中間插入一個新的數(shù)據(jù)，算法發(fā)現(xiàn)原本的三個的值沒改變，只是在中間加入了一個新的元素，原本的三個得到了復(fù)用這也就利用了虛擬在性能上的優(yōu)勢

首先我們舉一個例子
我們現(xiàn)在有這個數(shù)組
[

{
    id:201401,
    name:"chen"
},
{
    id:201402,
    name:"sun"
},          {
    id:201403,
    name:"wang"
},

]

如果我們使用index做key在我們渲染到頁面的時候變成


    li key:0 ，id:201401,name:chen
    li key:1 , id:201402,name:sun
    li key:2 , id:201403,name:wang

如果我們要在中間插入一條數(shù)組{id:201404,name:zhou}

    li key:0 ，id:201401,name:chen
    li key:1 ，id:201404,name:wang
    li key:2 , id:201402,name:sun
    li key:3 , id:201403,name:wang

當我們在中間插入新元素的時候 新元素的key值理所應(yīng)當變成了index=1，key值也就變成了1 而原本index==1的li元素的index就變成了2，原本index==2的元素key值就變成了3 。 這樣就導(dǎo)致虛擬dom的diff算法在做比較的時候發(fā)現(xiàn)，key值為1，2，3的元素和原來的key值為1，2，3的元素對比的時候發(fā)現(xiàn)二者不一樣，diff算法就會重新渲染這三個元素，原本key值為1，2的元素內(nèi)容沒有發(fā)生變化，但是因為key值使用的是index所以還需要重新渲染，這就失去了虛擬dom在性能上的優(yōu)勢，所有我們要使用唯一鍵值來做標記，例如id。

如果我們使用id做key在我們渲染到頁面的時候變成


    li key:201401 ,id:201401,name:chen
    li key:201402 ,id:201402,name:sun
    li key:201403 ,id:201403,name:wang

如果我們要在中間插入一條數(shù)組{id:201404,name:zhou}

    li key:201401 ，id:201401,name:chen
    li key:201404 ，id:201404,name:wang
    li key:201402 , id:201402,name:sun
    li key:201403 , id:201403,name:wang

因為我們是已id為key值，所以當我們向數(shù)組中間插入一個新的數(shù)據(jù)，diff算法發(fā)現(xiàn)原本的三個
  • 的key值沒改變，只是在中間加入了一個新的元素，原本的三個
  • 得到了復(fù)用這也就利用了虛擬dom在性能上的優(yōu)勢

    • 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110192.html

    相關(guān)文章

    • vue.js入門教程之基礎(chǔ)語法

      摘要：與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。兩者只能選其一對象語法我們可以傳給一個對象，以動態(tài)地切換。注意不支持語法。相比之下，簡單得多元素始終被編譯并保留，只是簡單地基于切換。這意味著將分別重復(fù)運行于每個循環(huán)中。 vue Class 與 Style 綁定 數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性，我們可以用 v-bind 處理...

      pumpkin9 評論0 收藏0

    • vue note 01

      摘要：數(shù)據(jù)綁定方式普通的文本可以使用語法雙大括號插在標簽內(nèi)部表達式每個綁定都只能包含單個表達式只會添加一次當再次修改時，不會觸發(fā)機制插入文本較少使用插入不推薦使用計算屬性基于它們的依賴進行緩存的，只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。 數(shù)據(jù)綁定方式： 1.普通的文本 可以使用 Mustache語法 (雙大括號) {{data}} 插在標簽內(nèi)部eg:{{}} //js: data{ ...

      leanote 評論0 收藏0

    • Vue.js源碼（2）：初探List Rendering

      摘要：最后舉兩個例子，回顧上面的內(nèi)容例一改變的是數(shù)組元素中屬性，由于創(chuàng)建的的指令，因此這里直接由指令更新對應(yīng)元素的內(nèi)容。 下面例子來自官網(wǎng)，雖然看上去就比Hello World多了一個v-for，但是內(nèi)部多了好多的處理過程。但是這就是框架，只給你留下最美妙的東西，讓生活變得簡單。 {{ todo.text }} ...

      shiyang6017 評論0 收藏0

    • Vue官方推薦的風(fēng)格指南

      摘要：官方推薦的風(fēng)格指南個人筆記最近剛注意到官方多了一個風(fēng)格指南的推薦。中始終用組件命名因為官方推薦風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風(fēng)格指南-個人筆記 最近剛注意到vue官方多了一個vue風(fēng)格指南的推薦。 因為業(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來增加自己代碼的規(guī)范性，效果不錯也可以安利到團隊。 文檔沒有對JS...

      null1145 評論0 收藏0

    • vue里面的v-for列表循環(huán)

      摘要：取到里面的偶數(shù)位的值在計算屬性不適用的情況下例如，在嵌套循環(huán)中你可以使用一個方法一段取值范圍的也可以取整數(shù)。 列表渲染 v-for v-for可以把數(shù)據(jù)中的一個數(shù)組對應(yīng)為一組元素v-for 指令需要以 item in items 形式的特殊語法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。 {{item.text}} data:{ items:[ ...

      verano 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <