Vue中的key

从子组件中传递值到父组件

//子组件中 <slot :user="user">

{{ user.lastName }} </slot>

//父组件中 <current-user>

<template v-slot:default="slotProps"> {{ slotProps.user.firstName }}

</template> </current-user>

Vue中的key

关于 key，我们常常在 v-for 中会接触到，当我们需要进行列表循环的时候，如果没有使用 key，就会有警报提示。

//场景一：循环列表 <div v-for="num in numbers" :key="index">

{{num}} </div>

//场景二：通过时间戳强制重新渲染 <div :key="+new Date()" >+new Date()</div>

那么为什么需要 key呢？

因为使用 key 相当于给 vnode 添加上一个唯一的 id，主要是在 DOM DIFF算法中使用的下面我们看个例子：

1. 如果上面的场景一

items 的值为 [1,2,3,4,5,6,7,8,9,10] 那么就是渲染出十个div 是吧。如果没有 key，那么当我们现在 items 的值变为 [0,1,2,3,4,5,6,7,8,9] 呢，那么机会第一个原来是 “1” 的 div内容变为“0”，而原来是“2”的div内容变为

“1”…以此类推。（因为没有key属性，Vue无法跟踪每个节点，使用的是“就地复用” 得策略，通过这样的方法来完成变更）

但是如果key的情况下，Vue能跟踪每个节点，就会直接新增一个 div 添加到内容是“1”的div前面。根据key，更准确，更快的找到对应的vnode节点。

设置key能够大大减少对页面的DOM操作，提高了diff效率，更加的高效更新虚拟DOM

1. 还有的用途就是我们的场景二

用来强制替换元素，当key改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。所以上面的元素会被删除而而重新添加。但是如果没有添加 key的话，就会直接替换div 里面的内容。而

不是删除添加元素。

注意点