VUE学习一 ————关于v-for中key值的作用

对此文章的理解
先讲结论，key作用就像数据库的主键

首先我们看一下key没有的情况下

<template>
  <div id="app">
    <div>
      <input type="text" v-model="inputText">
      <button @click="add">添加</button>
    </div>
    <!-- key给id2，因为id2不存在，所以相当没有 -->
    <li v-for="num in nums" :key = "num.id">
      <input type="checkbox"> {{num.text}}
    </li>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      inputText: '',
      message: 'dada',
      newId: 3,
      nums: [
        {id: 1, text: 'first'},
        {id: 2, text: 'two'},
        {id: 3, text: 'three'}
      ]
    }
  },
  methods: {
    add () {
      this.nums.unshift({id: ++this.newId, text: this.inputText})
      this.inputText = ''
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这个情况下，是相当与没有key值的
然后添加一个新的（在数组头部插入）

可以发现勾选的不再是first前的框。
然后我们在将代码中的id2修改为id，然后再次选择first前的选择框，然后添加一个four，发现
由此可以发现key是用来确定数据唯一性的重要数据