Web Front-endVue.jsWhat is Key in vue? What is the difference between setting the key and not setting it?
What is Key in vue? The following article will introduce to you the principle of key in vue, and talk about the difference between setting the key and not setting the key. I hope it will be helpful to everyone!
1. What is Key
Before we begin, let’s restore two actual work scenarios
When we use
v-for, we need to addkey
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>- ## to the unit #Use the timestamp generated by
new Date()
askey, and manually force a re-rendering
<Comp :key="+new Date()" />So what is the logic behind this? , What is the function of
key?
key is the unique ID given to each vnode, and it is also an optimization strategy for diff. It can find the corresponding one more accurately and faster based on the key. vnode node. (Learning video sharing: vue video tutorial)
The logic behind the scene
When we are usingv-for When , you need to add key
- If no key is used, Vue will adopt the in-place restoration principle: minimize the movement of the element, and will try to do its best To a certain extent, patch or reuse elements of the same type in the same appropriate place.
- If key is used, Vue will record the elements according to the order of keys. If the element that once owned the key no longer appears, it will be directly removed or destroyed
new Date()The generated timestamp is used as key, manually forced to trigger re-rendering
- When the rerender with the new value is used as the key, the new key is Comp appears, then the old key Comp will be removed, and the new key Comp will trigger rendering
2. The difference between setting the key and not setting the key
For example Example:Create an instance and insert data into the
items array after 2 seconds
<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> Without using key, vue This operation will be performed:
- Compare A, A, nodes of the same type, and perform
- patch
, but the data is the same, the operation does not occurdom Compare B, B, nodes of the same type, perform - patch
, but the data is the same, does not occurdomOperationCompare C, F, nodes of the same type, perform - patch
, the data is different,domoperation occurs Compare D, C, nodes of the same type, perform - patch
, the data is different,domoperation occursCompare E, D, nodes of the same type, perform - patch
, the data is different,domoperation occurs The loop ends, insert E into - DOM
key: vue will perform the following operation:
- Compare A, A, nodes of the same type, perform
- patch
, but the data is the same, nodomoperation occursCompare B, B, nodes of the same type, perform - patch
, but the data is the same, nodomoperation occursCompare C, F, nodes of different types - Compare E, E, the same type Node, perform
- patch
, but the data is the same, nodomoperation will occur
Compare D, D, nodes of the same type, perform- patch
- patch
, but the data is the same, nodomoperation occursCompare C and C, nodes of the same type, perform - patch
, but the data is the same, Nodomoperation occursThe loop ends, before F is inserted into C
key can greatly reduce the DOM operations on the page and improve the diff efficiency
Can setting the key value definitely improve diff efficiency?
In fact, this is not the case. The document also clearly states that When Vue.js uses v-for to update the rendered element list, it defaults to "in-place reuse" Strategy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and ensure that it displays each element that has been rendered at a specific index This default mode is efficient, but it is only suitable for list rendering output that does not rely on subcomponent state or temporary DOM state (for example: form input values) It is recommended to use it whenever possible ## Providekey when #v-for, unless traversing the output DOM content is very simple, or deliberately relying on the default behavior to obtain performance improvements<h2 id="strong-三-原理分析-strong"><strong>三、原理分析</strong></h2>
<p>源码位置：core/vdom/patch.js </p>
<p>里判断是否为同一个<code>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]
}
}
...
}The above is the detailed content of What is Key in vue? What is the difference between setting the key and not setting it?. For more information, please follow other related articles on the PHP Chinese website!
vue中props可以传递函数吗Jun 16, 2022 am 10:39 AMvue中props可以传递函数；vue中可以将字符串、数组、数字和对象作为props传递，props主要用于组件的传值，目的为了接收外面传过来的数据，语法为“export default {methods: {myFunction() {// ...}}};”。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Zend Studio 13.0.1
Powerful PHP integrated development environment
SublimeText3 Chinese version
Chinese version, very easy to use
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
