Heim > Artikel > Web-Frontend > Was ist Key in Vue? Was ist der Unterschied zwischen dem Setzen des Schlüssels und dem Nicht-Setzen?
Was ist Key in Vue? Der folgende Artikel stellt Ihnen das Prinzip der Schlüsseleingabe vue vor und erläutert den Unterschied zwischen dem Festlegen des Schlüssels und dem Nicht-Festlegen des Schlüssels. Ich hoffe, dass er für alle hilfreich ist!
Bevor wir beginnen, stellen wir zwei tatsächliche Arbeitsszenarien wieder her
Wenn wir v-for
verwenden, müssen wir es der Einheit hinzufügen 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) ) ) ) }🎜🎜Verwenden Sie den von
+new Date()
generierten Zeitstempel als key
und erzwingen Sie ihn Manuell ein erneutes Rendern auslösen🎜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] } } ... }🎜Was ist also die Logik dahinter und welche Rolle spielt der
Schlüssel
? 🎜🎜In einem Satz🎜🎜🎜Schlüssel ist die eindeutige ID, die jedem V-Knoten zugewiesen wird, und es ist auch eine Optimierungsstrategie von Diff. Gemäß dem Schlüssel kann der entsprechende V-Knoten genauer und schneller gefunden werden. 🎜 (Teilen von Lernvideos: vue Video Tutorial🎜)🎜v-for
verwenden, müssen wir key
zum hinzufügen Einheit 🎜. Der von +new Date()
generierte Zeitstempel wird als Schlüssel
verwendet, um das erneute Rendern manuell auszulösen🎜items
ein🎜rrreee🎜Wenn key code> wird nicht verwendet, <code>vue
Dieser Vorgang wird ausgeführt: 🎜🎜🎜🎜Analysieren Sie den Gesamtprozess: 🎜patch
durch, aber die Daten sind die gleichen, dom
tritt nicht auf. Operation🎜Vergleichen Sie B, B, Knoten desselben Typs, führen Sie patch
aus, aber die Daten sind die Dasselbe, es findet keine dom
-Operation statt🎜Vergleichen Sie C, F, Knoten desselben Typs, führen Sie patch
durch, Daten sind unterschiedlich, dom Code>-Vorgang tritt auf🎜Vergleichen Sie D, C, Knoten desselben Typs, führen Sie <code>Patch
durch, die Daten sind unterschiedlich, dom
-Vorgang tritt auf🎜 Vergleichen Sie E, D, Knoten desselben Typs, führen Sie patch
aus, die Daten sind unterschiedlich, dom tritt auf
Operation🎜Die Schleife endet, fügen Sie E in DOM
key
: vue
führt diesen Vorgang aus: 🎜patch
aus. Die Daten sind jedoch dieselben, die dom
-Operation jedoch nicht auftreten🎜Vergleichen Sie B, B, Knoten desselben Typs, führen Sie einen Patch
durch, aber die Daten sind dieselben, dom tritt nicht auf
Operation 🎜Vergleichen Sie C, F, Knoten unterschiedlichen Typs patch
durch, aber die Daten sind gleich, es passiert nicht dom
-OperationPatch
durch, aber die Daten sind dieselben, dom
-Operation🎜Vergleichen Sie C und C, Knoten desselben Typs, führen Sie patch
durch, aber die Daten sind dieselben, dom
-Operation tritt nicht auf🎜Die Schleife endet und F wird vor C eingefügtSchlüssel
ist festgelegt. Dies kann die DOM
-Vorgänge auf der Seite erheblich reduzieren und die diff
-Effizienz verbessern🎜v-for
zu verwenden > wann immer möglich Geben Sie key
an, wenn das Durchlaufen des Ausgabe-DOM-Inhalts sehr einfach ist, oder Sie verlassen sich bewusst auf das Standardverhalten, um Leistungsverbesserungen zu erzielen🎜源码位置: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] } } ... }
Das obige ist der detaillierte Inhalt vonWas ist Key in Vue? Was ist der Unterschied zwischen dem Setzen des Schlüssels und dem Nicht-Setzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!