vue中key的作用

key的作用

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

使用Key

<div id="container">
    <ul>
        <li v-for = "(item, index) in arr" :key="item">{{item}}</li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#container',
        data() {
            return {
                arr:[1,2,3,4]
            }
        }
    });
    document.onclick = () => {
        let li = document.getElementsByTagName('li')[0].style.color = 'red';
        vm.arr.reverse();
    }
</script>

直接移动DOM,我们可以发现，之前变色的1被移动到了最底下。

不使用key

不改变原来的dom，而是直接修改里面的文本。

举个不使用key的其他🌰

<template v-if="isShow">
        <span>input:</span>
        <input type="text">
    </template>
    <template v-else>
        <span>input:</span>
        <input type="text">
    </template>

如果这里不使用key，isShow更改为false，输入框的内容不会更新,因为vue会默认这两个输入框相同。

---

官方文档推荐使用key的场景

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

• 完整地触发组件的生命周期钩子
• 触发过渡

例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

如果这里不使用key的话，text发生变化仅改变内部的值，而不替换元素。

使用index作为key值带来的问题

<div id="container">
    <ul>
        <li v-for = "(item, index) in arr" :key="index">{{item}}</li>
    </ul>
</div>

会出现跟不使用key值相同的情况。归根结底还是因为每个li的key发生了改变，触发了强制更新。

因此在这个场景下，使用key值能够节省性能。

• 因此，官方推荐使用唯一的key,比如id，而不是使用索引。

  最常见的用例是结合 v-for：

  <ul>
    <li v-for="item in items" :key="item.id">...</li>
  </ul>
  

  小结

  • key值如果唯一且不变，操作元素只让元素移动可以节省性能
  • key值如果发生改变则重新创建dom，并且触发生命周期钩子
  • 不设置key值，会尽可能保留原来的dom，而仅改变内容