版权声明：solo https://blog.csdn.net/sansan_7957/article/details/83341938
key
Vue 官方建议在使用 v-for 时尽量提供 key 属性，但是我一直都没写也没遇到什么问题，最近遇到的bug就是因为没写key。
问题描述
两个Select联动，当第一个Select选项发生变化时第二个Select可选项option随之变动。但是当一个Select发生变化时，第二个Select的选项并未随之改变（实际上option的value值已经改变了只是label没变）。
解决方案
在使用 v-for 的时候提供 key。
原因
当 Vue.js 用
v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一
key属性。
以上是 key 的主要用法，它还有其他用途：
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
- 完整地触发组件的生命周期钩子
- 触发过渡，例如：
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时， 会随时被更新，因此会触发过渡。