小编给大家分享一下vue中的key有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
key到底有什么用途 ?
先来看官方解释 :
key属性主要用在vue的
虚拟DOM算法(diff算法)
, 在新旧nodes对比时辨识VNodes
不使用key
时, Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素
的算法使用key
时, 它会基于key的变化重新排列元素顺序
, 并且会移除/销毁key
不存在的元素
面对这些云里雾里的概念, 先不要急, 看一遍有个印象, 接下来一步步来深度解析key到底拿来干嘛。
1 vnode 虚拟节点
vnode
: virtual node, 虚拟节点
还记得DOM树中的要素吗 ? 文档, 元素, 节点
那什么是虚拟节点呢 ?
简单来说, 要被vue渲染到页面上的节点, 就是虚拟节点
<template id="my-app"> <div class="title" style="font-size: 30px; color: red;">哈哈哈</div> </template>
这里的div就是一个虚拟节点, 在vue中, 它以这种形式存在
const vnode = { type: "div", props: { class: "title", style: { "font-size": "30px", color: "red", }, }, children: "哈哈哈", };
不理解的地方可能是children这个属性, 因为现在div没有子元素, 因此值仅仅为"哈哈哈", 若有子元素, 那么就会是一直套娃套下去, 套到最后一个结点为止, 如
children: [ { // 子元素 }, { // 子元素 } ],
2 vDOM 虚拟DOM
和真实DOM一样, 有真实节点就有真实DOM, 那么有虚拟节点, 就有虚拟DOM
当然虚拟DOM tree也一样咯, 也有叫VNode tree的, 一个意思, 这个不需要纠结, 大概是下面这样
<template id="my-app"> <div> <div> <p></p> <p></p> <ul> <li></li> <li></li> <li></li> </ul> </div> </div> </template>
转换成虚拟DOM树 :
虚拟DOM在渲染成真实DOM时, 不一定是完全一样的, 这里涉及到组件的问题, 后面有机会在讲
3 渲染过程
4 案例 : 插入f
理解完前面的后, 这里开始正题, 仅需一个案例, 就能全盘理解key的作用, 下面开始
先看这个简单的案例(没加key)
<ul> <li v-for="item in letters">{{item}}</li> </ul>vue中的key有什么用