例子

当我点击按钮时会在中间插入一个f

<div id="app"></div>
    <template id="my-app">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>    
        <button @click="insertF">insert f</button>
    </template>  
    <script src="../js/vue.js"></script>
    <script>    
        const App = {
            template: '#my-app',
            data() {
                return {
                    letters: ['a', 'b', 'c', 'd']
                }
            },
            methods: {
                insertF() {
                    this.letters.splice(2, 0, 'f');
                }
            }
        }
        Vue.createApp(App).mount('#app');
</script>

我们可以确定的是，这次更新对于ul和button是不需要进行更新，需要更新的是我们li的列表：

• 在Vue中，对于相同父元素的子元素节点并不会重新渲染整个列表；
• 因为对于列表中 a、b、c、d它们都是没有变化的；
• 在操作真实DOM的时候，我们只需要在中间插入一个f的li即可；

那么Vue中对于列表的更新究竟是如何操作的呢？

• Vue事实上会对于有key和没有key会调用两个不同的方法；
• 有key，那么就使用 patchKeyedChildren方法；
• 没有key，那么就使用 patchUnkeyedChildren方法；

没有key执行操作

没有key对应的源代码如下：

我们会发现上面的diff算法效率并不高：

• c和d来说它们事实上并不需要有任何的改动；
• 但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；

有key执行操作

如果有key，那么会执行什么样的操作呢？

第一步的操作是从头开始进行遍历、比较：

• a和b是一致的会继续进行比较；
• c和f因为key不一致，所以就会break跳出循环；

第二步的操作是从尾部开始进行遍历、比较：

第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：

第五步是最特色的情况，中间还有很多未知的或者乱序的节点：

所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：

• 在没有key的时候我们的效率是非常低效的；
• 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；

文章出自：coderwhy

总结

1. 有key和没有key的区别是，有key的每次渲染，Vue 会基于每个元素的 Key 值，来判断该元素的重新渲染，避免不必要的 DOM 重新渲染，提高性能；而没有key的则无法得到性能优化。
2. 如果动态增减列表元素，那么建议一定要使用key