Akino's Blog

无论开发小程序还是 Vue 应用，都经常会使用到列表渲染，在使用过程中，如果不绑定 key 值，ide 经常警告需要绑定 key 值。但是一直都没有去深究为什么需要绑定一个 key 值，现在终于有时间了，所以去关注一下这些底层的东西。

举个栗子

<head>
  <title>v-key</title>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="username">
      <button @click="addUser">添加用户</button>
    </div>
    <div v-for="user in users">  //:key="user.id"
      <input type="checkbox">{{user.username}}
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    curId: 3,
    username: '',
    users: [
      {
        id: 1,
        username: '小红'
      },
      {
        id: 2,
        username: '小明'
      },
      {
        id: 3,
        username: '小天'
      }
    ]
  },
  methods: {
    addUser() {
      this.users.unshift({
        id: ++this.curId,
        username: this.username
      });
      this.username = '';
    }
  }
});
</script>

不绑定 key 的情况，从数组头部添加元素时，checkbox 选中的永远是第二条数据。