1.Vue 中的 key 到底有什么用？
1.兩個相同的組件產(chǎn)生類似的DOM結構雀摘，不同的組件產(chǎn)生不同的DOM結構裸删。
2.同一層級的一組節(jié)點，他們可以通過唯一的id進行區(qū)分阵赠。
key的作用主要是為了高效的更新虛擬DOM
key 是給每一個 vnode(javaScript對象) 的唯一 id,依靠 key,我們的 diff 操作可以更準確涯塔、更快速 (對于簡單列表頁渲染來說 diff 節(jié)點也更快肌稻。
diff 算法的過程中,先會進行新舊節(jié)點的首尾交叉對比,當無法匹配的時候會用新節(jié)點的 key 與舊節(jié)點進行比對,從而找到相應舊節(jié)點。
更準確 : 因為帶 key 就不是就地復用了,在 一些節(jié)點函數(shù)中 以 a.key === b.key 對比中可以避免就地復用的情況伤塌。所以會更加準確,
更快速 : key 的唯一性可以被 Map 數(shù)據(jù)結構充分利用,相比于遍歷查找的時間復雜度 O(n),Map 的時間復雜度僅僅為 O(1),
源碼如下:
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;
}
2.vue中使用v-for時為什么不能用index作為key灯萍？
- 更新DOM的時候會出現(xiàn)性能問題
- 會發(fā)生一些狀態(tài)bug
- React 中的 key 也是如此
1）index作為key，其實就等于不加key
2）index作為key每聪，只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出（這是vue官網(wǎng)的說明）
說明：當以數(shù)組的下標index作為key值時 其中一個元素發(fā)生了變化 就有可能導致所有元素的key值發(fā)生改變 diff算法是比較同級之間的不同 以key來進行關聯(lián) 當對數(shù)組進行下標的變換時旦棉，比如刪除第一條數(shù)據(jù)，那么以后所有的Index都會發(fā)生改變药薯，那么key自然也跟著全部發(fā)生改變绑洛， 所以index作為key值是不穩(wěn)定的，這種不穩(wěn)定性有可能導致性能的浪費 導致diff無法關聯(lián)起上一次一樣的數(shù)據(jù) 因此 能不用Index作為key就不要用Index
