首页
   /       /   
Vue循环使用key和不使用key
2月
24
Vue循环使用key和不使用key
作者: 大彭Sir    分类: 教学教程     正在检查是否收录...

例子

当我点击按钮时会在中间插入一个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的操作

没有key执行操作

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

patchUnkeyedChildren

过程图

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

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

有key执行操作

如果有key,那么会执行什么样的操作呢?

patchKeyedChildren

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

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

第一步对比过程

第二步的操作是从尾部开始进行遍历、比较:
第二步的对比过程
第三步是如果旧节点遍历完毕,但是依然有新的节点,那么就新增节点:
新增节点
第四步是如果新的节点遍历完毕,但是依然有旧的节点,那么就移除旧节点:
移除旧节点
第五步是最特色的情况,中间还有很多未知的或者乱序的节点:
未知序列操作
所以我们可以发现,Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作:

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

文章出自:coderwhy

总结

  1. 有key和没有key的区别是,有key的每次渲染,Vue 会基于每个元素的 Key 值,来判断该元素的重新渲染,避免不必要的 DOM 重新渲染,提高性能;而没有key的则无法得到性能优化。
  2. 如果动态增减列表元素,那么建议一定要使用key
本文标签: 标签: VUE diff算法 key
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者 大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

评论

Theme By Brief 鄂ICP备19010459号

sitemap

首页

分类

友链