@TOC

本节内容：在日常开发中，经常会使用v-for进行遍历，但是每次使用其时，都要被强制的加上key，那么key究竟起着什么样的作用？话不多说，我们先看一个案例

一、案例

源码：

<div>
  <input type="text" v-model='name'>
  <button @click='add'>添加</button>
</div>
<ul>
  <li v-for='(item, i) in nameList' :key='item.id'>
    <input type="checkbox"> {
   
   {
   
   item.name}}
  </li>
</ul>
</div>
<script>
const HelloVueApp = {
   
   
  components: {
   
   
    getTitleComponent,
    toDoList
  },
  data() {
   
   
    return {
   
   
      bookTitle: '',
      selectVal: '',

      nameList: [
        {
   
    id: 1, name: '张三' },
        {
   
    id: 2, name: '李四' },
        {
   
    id: 3, name: '王五' }
      ],
      name: '',
      newId: 3
    }
  },
  methods: {
   
   
    add () {
   
   
        // 注意是 unshift 添加，将在头部添加元素
      this.nameList.unshift({
   
   id: ++this.newId, name: this.name})
      this.name = ''
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

1、不加key值时

2、加key值时

• 通过以上两个结果我们可以看出，当我们没加key值时，没有 key 属性，状态默认绑定的是位置；加上key值有 key 时，状态根据key的值绑定到了相应的数组元素上
• vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 ，key的作用主要是为了高效的更新虚拟DOM。
• 由于key的唯一性，尽量把id作为key值。index索引的话因为并不具有唯一性，不能作为key值
  Vue中这样说道：维护状态，当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
  在Key的语法当中我们得知：特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且那些使用了已经不存在的 key 的元素将会被移除/销毁。
• 一张图带你更深入的理解,如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。