Answer 1

看完了所有的答案，好像都没有一个实际案例来说明没有key的时候带来的问题以及有key的时候是如何解决的，下面给大家跑一个案例：

<template>
  <ul>
    <li v-for="item in list">{{item.name}}</li>
  </ul>
  <button @click="changeList">删除列表</button>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.list = Array.from({length: 10}).map((_,index) => {
      return {
        name: index,
        id: index
      }
    })
    this.$nextTick(()=>{
      let listNodes = document.getElementsByTagName("li")
      listNodes[0].setAttribute("active", true)
    })
  },
  methods: {
    changeList () {
        this.list.splice(0,1, {
          name: 9,
          id: 9
        })
    }
  }
}
</script>

在这里有一个列表, 在创建之后被别有用心之人第一项的属性上加了一个setAttribute("active", true)，然后点击按钮更新了第一条数据，你会发现列表第一条的属性”active“依然存在，但如果加上了key，这个属性就消失了。那么就说明key在这里的作用就是创建了一个全新的节点，替换掉了原来的节点。
还有一个例子是给任意一个节点绑定一个动态的key，然后设置一个按钮，每次点击就更新这个key值，你会发现，这个节点会不断的进行更新（这也是一个强制更新组件的一个方法）