亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue和react項(xiàng)目中key的作用示例詳解

 更新時(shí)間：2023年08月07日 10:59:41   作者：劉鵬瑜  
這篇文章主要為大家介紹了vue和react項(xiàng)目中key的作用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

vue react對(duì)比新舊虛擬節(jié)點(diǎn)

vue和react都是采用diff算法來(lái)對(duì)比新舊虛擬節(jié)點(diǎn)，從而更新節(jié)點(diǎn)。

在交叉對(duì)比中，當(dāng)新節(jié)點(diǎn)跟舊節(jié)點(diǎn)頭尾交叉對(duì)比沒(méi)有結(jié)果時(shí)，會(huì)根據(jù)新節(jié)點(diǎn)的key去對(duì)比舊節(jié)點(diǎn)數(shù)組中的key，從而找到相應(yīng)的舊節(jié)點(diǎn)（這里對(duì)應(yīng)的是一個(gè)key=>index的map映射）。

如果沒(méi)有找到就認(rèn)為是一個(gè)新增節(jié)點(diǎn)。而如果沒(méi)有key，那么就會(huì)采用遍歷查找的方式去找到對(duì)應(yīng)的舊節(jié)點(diǎn)，一種一個(gè)map映射，另一種是遍歷查找。相比而言，map映射速度更快。

vue部分源碼如下

//vue項(xiàng)目 src/core/vdom/patch.js -448行
//oldCh是一個(gè)舊虛擬節(jié)點(diǎn)數(shù)組
if(isUndef(oldKeyToIdx)){
    oldKeyToIdx = createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx)
}
if(isDef(newStartVnode.key)){
    //map方式獲取
    idxInOld = oldKeyToIdx[newStartVnode.key]
}else {
    //遍歷方式獲取
    idxInOld = findIdxInOld(newStartVnode,oldCh,oldStartIdx,oldEndIdx)
}

創(chuàng)建map函數(shù)

function createKeyToOldIdx(children,beginIdx,endIdx){
    let i,key
    const map = {}
    for(i = beginIdx;i<=endIdx;i++){
        key = children[i].key
        if(isDef(key)) map[key] = i    
    }
    return map
}

遍歷尋找

//sameVnode 是對(duì)比新舊節(jié)點(diǎn)是否相同的函數(shù)
function findIdxInOld(node,oldCh,start,end){
    for(let i = start;i<end;i++){
        const c = oldCh[i]
        if(isDef(c) && sameVnode(node,c)) return i    
    }
}

上面的結(jié)論是基于沒(méi)有key的情況diff速度會(huì)更快。確實(shí)，這種觀點(diǎn)沒(méi)有錯(cuò)。沒(méi)有綁定key的情況下，并且在遍歷模版簡(jiǎn)單的情況下，會(huì)導(dǎo)致虛擬新舊節(jié)點(diǎn)對(duì)比更快，節(jié)點(diǎn)也會(huì)復(fù)用。而這種復(fù)用是就地復(fù)用，一種鴨子辯型的復(fù)用。以下為簡(jiǎn)單的例子：

<div id="app">
    <div v-for="i in dataList">{{ i }}</div>
</div>
var vm = new Vue({
    el:'#app',
    data:{
        dataList:[1,2,3,4,5]    
    }
})

以上的例子，v-for的內(nèi)容會(huì)生成以下的dom節(jié)點(diǎn)數(shù)組，我們給每一個(gè)節(jié)點(diǎn)標(biāo)記一個(gè)身份id：

[
    '<div>1</div>',//id:A
    '<div>2</div>',//id:B
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
]

改變dataList數(shù)據(jù)，進(jìn)行數(shù)據(jù)位置替換，對(duì)比改變后的數(shù)據(jù)

vm.dataList = [4,1,3,5,2]//數(shù)據(jù)位置替換
//沒(méi)有key的情況，節(jié)點(diǎn)位置不變，但是節(jié)點(diǎn)innerText內(nèi)容更新了
[
    '<div>4</div>',//id:A
    '<div>1</div>',//id:B
    '<div>3</div>',//id:C
    '<div>5</div>',//id:D
    '<div>2</div>',//id:E
]
//有key的情況，dom節(jié)點(diǎn)位置進(jìn)行了交換，但是內(nèi)容沒(méi)有更新
// <div v-for="i in dataList" :key='i'>{{ i }}</div>
[
    '<div>4</div>',//id:D
    '<div>1</div>',//id:A
    '<div>3</div>',//id:C
    '<div>5</div>',//id:E
    '<div>2</div>',//id:B
]

增刪dataList列表項(xiàng)

vm.dataList = [3,4,5,6,7] //數(shù)據(jù)進(jìn)行增刪
// 1、沒(méi)有key的情況，節(jié)點(diǎn)位置不變，內(nèi)容也更新了
[
    '<div>3</div>',//id:A
    '<div>4</div>',//id:B
    '<div>5</div>',//id:C
    '<div>6</div>',//id:D
    '<div>7</div>',//id:E
]
// 2、有key的情況，節(jié)點(diǎn)刪除了A B節(jié)點(diǎn)，新增了F G節(jié)點(diǎn)
// <div v-for="i in dataLIST" :key='i'>{{ i }}</div>
[
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
    '<div>6</div>',//id:F
    '<div>7</div>',//id:G
]

從以上來(lái)看，不帶有key，并且使用簡(jiǎn)單的模版，可以更有效的復(fù)用節(jié)點(diǎn)，diff速度也是不帶key更加快速的，因?yàn)閹в衚ey在增刪節(jié)點(diǎn)上有耗時(shí)。這就是vue文檔所說(shuō)的默認(rèn)模式。但是這個(gè)并不是key作用，而是沒(méi)有key的情況下可以對(duì)節(jié)點(diǎn)就地復(fù)用，提高性能。

這種模式會(huì)帶來(lái)一些隱藏的副作用，比如可能不會(huì)產(chǎn)生過(guò)度效果，或者在某些節(jié)點(diǎn)有綁定數(shù)據(jù)（表單）狀態(tài)，會(huì)出現(xiàn)狀態(tài)錯(cuò)位。vue文檔也說(shuō)明了這個(gè)模式是高效的，但是只是適用于不依賴(lài)子組件狀態(tài)或臨時(shí)dom狀態(tài)（例如：表單輸入值）的列表渲染輸出

但是key的作用是什么？

key是給每個(gè)vnode的唯一id，可以依靠key，更快的拿到oldVnode中對(duì)應(yīng)的vnode節(jié)點(diǎn)。

1、更準(zhǔn)確

因?yàn)閹ey就不是就地復(fù)用了，在sameNode函數(shù)a.key === b.key對(duì)比中可以避免就地服用的情況。所以會(huì)更加準(zhǔn)確。

2、更快

利用key的唯一性生成map對(duì)象來(lái)獲取對(duì)應(yīng)節(jié)點(diǎn)，比遍歷方式更快。

以上就是vue和react項(xiàng)目中key的作用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue react項(xiàng)目key作用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論