Vue의 Key란 무엇인가요? 다음 글에서는 vue의 키 원리를 소개하고, 키를 설정하는 것과 설정하지 않는 것의 차이점에 대해 이야기해보겠습니다.
시작하기 전에 두 가지 실제 작업 시나리오를 복원해 보겠습니다.
v-for
를 사용할 때 이를 유닛에 추가해야 합니다. key
v-for
时,需要给单元加上key
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
用+new Date()
生成的时间戳作为key
,手动强制触发重新渲染
<Comp :key="+new Date()" />
那么这背后的逻辑是什么,key
的作用又是什么?
一句话来讲
key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点。(学习视频分享:vue视频教程)
当我们在使用v-for
时,需要给单元加上key
用+new Date()
生成的时间戳作为key
,手动强制触发重新渲染
举个例子:
创建一个实例,2秒后往items
数组插入数据
<body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../../dist/vue.js"></script> <script> // 创建实例 const app = new Vue({ el: '#demo', data: { items: ['a', 'b', 'c', 'd', 'e'] }, mounted () { setTimeout(() => { this.items.splice(2, 0, 'f') // }, 2000); }, }); </script> </body>
在不使用key
的情况,vue
会进行这样的操作:
分析下整体流程:
patch
,但数据相同,不发生dom
操作patch
,但数据相同,不发生dom
操作patch
,数据不同,发生dom
操作patch
,数据不同,发生dom
操作patch
,数据不同,发生dom
操作DOM
中一共发生了3次更新,1次插入操作
在使用key
的情况:vue
会进行这样的操作:
patch
,但数据相同,不发生dom
操作patch
,但数据相同,不发生dom
操作patch
,但数据相同,不发生dom
操作patch
,但数据相同,不发生dom
操作patch
,但数据相同,不发生dom
操作一共发生了0次更新,1次插入操作
通过上面两个小例子,可见设置key
能够大大减少对页面的DOM
操作,提高了diff
效率
其实不然,文档中也明确表示
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出
建议尽可能在使用 v-for
时提供 key
function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) || ( isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error) ) ) ) }
+new Date()
에 의해 생성된 타임스탬프를 key
로 사용하여 강제로 적용 수동으로 Trigger re-rendering🎜function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { ... while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { ... } else if (isUndef(oldEndVnode)) { ... } else if (sameVnode(oldStartVnode, newStartVnode)) { ... } else if (sameVnode(oldEndVnode, newEndVnode)) { ... } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right ... } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left ... } else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) if (isUndef(idxInOld)) { // New element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } else { vnodeToMove = oldCh[idxInOld] if (sameVnode(vnodeToMove, newStartVnode)) { patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm) } else { // same key but different element. treat as new element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } } newStartVnode = newCh[++newStartIdx] } } ... }
key
의 역할은 무엇인가요? 🎜🎜한 문장으로🎜🎜🎜key는 각 vnode에 부여되는 고유 ID이며, 이는 diff의 최적화 전략이기도 합니다. key에 따라 해당 vnode 노드를 더 정확하고 빠르게 찾을 수 있습니다. 🎜 (학습 영상 공유: vue video tutorial🎜)🎜v-for
를 사용할 때 key
를 🎜 사용 +new Date()
에 의해 생성된 타임스탬프는 수동으로 재렌더링을 트리거하는 키
로 사용됩니다.🎜items
배열에 데이터를 삽입합니다🎜rrreee🎜key</ code>가 사용되지 않으면 <code>vue
이 작업이 수행됩니다: 🎜🎜패치
를 수행하고, 하지만 데이터가 동일하면 dom
이 발생하지 않습니다. 작업🎜B, B, 동일한 유형의 노드를 비교하여 패치
를 수행하지만 데이터는 동일합니다. dom
작업이 발생하지 않습니다.🎜C, F, 동일한 유형의 노드를 비교하고 패치
를 수행합니다. 데이터가 다릅니다. dom</ code> 연산 발생</li>🎜동일한 유형의 D, C 노드를 비교하여 <code>패치
수행, 데이터가 다르면 dom
연산 발생🎜 동일한 유형의 E, D 노드를 비교하고 패치
를 수행하고 데이터가 다르며 dom이 발생
작업🎜루프가 종료되고 E를 DOM
key
의 경우: vue
다음 작업을 수행합니다: 🎜패치
를 수행하지만 데이터는 동일하지만 dom
작업은 수행하지 않습니다. 발생🎜B, B, 동일한 유형의 노드를 비교하여 패치
를 수행했지만 데이터는 동일하며 dom이 발생하지 않습니다
작업 🎜다른 유형의 C, F 노드 비교 패치
를 수행하지만 데이터는 동일하므로 발생하지 않습니다 dom
연산패치
를 수행하지만 데이터는 동일하므로 dom
연산🎜C와 C를 비교하여 동일한 유형의 노드, 패치
를 수행하지만 데이터는 동일, dom
연산 발생하지 않습니다🎜루프가 끝나고 F가 C 앞에 삽입됩니다키
가 설정되었습니다. 페이지의 DOM
작업을 크게 줄이고 diff
효율성을 향상할 수 있습니다🎜v-for</code를 사용하는 것이 좋습니다. > 가능할 때마다 출력 DOM 콘텐츠를 탐색할 때 <code>키
를 제공하는 것이 매우 간단하거나 성능 향상을 위해 의도적으로 기본 동작에 의존합니다🎜源码位置:core/vdom/patch.js
里判断是否为同一个key
,首先判断的是key
值是否相等如果没有设置key
,那么key
为undefined
,这时候undefined
是恒等于undefined
function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) || ( isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error) ) ) ) }
updateChildren
方法中会对新旧vnode
进行diff
,然后将比对出的结果用来更新真实的DOM
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { ... while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { ... } else if (isUndef(oldEndVnode)) { ... } else if (sameVnode(oldStartVnode, newStartVnode)) { ... } else if (sameVnode(oldEndVnode, newEndVnode)) { ... } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right ... } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left ... } else { if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx) if (isUndef(idxInOld)) { // New element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } else { vnodeToMove = oldCh[idxInOld] if (sameVnode(vnodeToMove, newStartVnode)) { patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx) oldCh[idxInOld] = undefined canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm) } else { // same key but different element. treat as new element createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx) } } newStartVnode = newCh[++newStartIdx] } } ... }
위 내용은 Key in vue란 무엇인가요? 키를 설정한 것과 설정하지 않은 것의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!