Vue中key的作用及原理

Vue中key的作用及原理

• key在Vue是DOM对象的标识；
• 进行列表展示时，默认key是index；
• 如果数据只做展示使用，使用index作为key是没有任何问题的；
• 如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM

<template>
  <div>
    <ul>
      <li v-for="item in arr.slice(start, start + 4)" :key="item">
        {{ item }}
        <input type="text">
      </li>
    </ul>
    <button @click="pre">上一页</button> <button @click="next">下一页</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"],
      start: 0,
    };
  },
  methods: {
    next() {
      this.start += 4;
    },
    pre() {
      this.start -= 4;
    },
  },
};
</script>
<style scoped>
li {
  list-style: none;
}
</style>

       加 key 的效果

 

不加key 的效果

 

 

 

key的作用

vue 使用虚拟dom 进行渲染时，为了提高性能会选择性的复用元素。加上 key之后，可以让虚拟dom复用元素时，加以区别。两个不一样的key 不会复用。避免bug（比如使用 v-for循环渲染数据的时候，进行翻页，此时li会被复用，里面的input会被复用，导致input的value值还在) 。