vue中的标签中的key属性

Question

问题遇到的现象和发生背景

下方代码，为什么用key?

<router-link key="collapse"> 

问题相关代码，请勿粘贴截图

<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <img src="@/assets/common/logo.png" class="sidebar-logo">
      </router-link>
    </transition>
  </div>
</template>
...
props: {
  collapse: {
    type: Boolean,
    required: true
  }
}

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

vue中的key属性是为了更为快速的建立虚拟dom所准备的，一般使用在for循环中，key也可以用来表明当前节点的唯一身份，尤其是像v-for这种循环出来的列表，节点几乎都是一模一样的，这时候为每个节点添加key属性 可以使虚拟dom更为清晰的分辨出每个节点的身份
key属性也可以用在一些其他的地方，像vue中的router-view，如果你在router-view包裹了transition 节点，这是就要为router-view动态的添加一个key属性，用于表示当前的url已经变更，vue检测到了key属性的变化就会重新执行一次transition动画，否则如果不添加key属性，vue检测不到url的变更，动画效果就只会在初始时执行一次