Vue学习笔记v-for的key

2022年6月11日12:25:36

参考文档:https://cn.vuejs.org/v2/guide/

当使用v-for遍历数组时,如果没有指定key,则当数组元素顺序发生变更时,dom绑定的数据会更新,而dom本身的顺序不会变化;如果指定了key,则当数组元素顺序发生变更时,dom会和数据同步更新。下面用一个简单的例子来说明:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script></head><body><divid="keyTest"><spanid="unchange">dom未重新渲染</span><divv-for="item in items"><span>{{item.message}}</span></div><spanid="change">dom有重新渲染</span><divv-for="item in items":key="item.id"><span>{{item.message}}</span></div><buttontype="button"@click="changeOrder">changeOrder</button></div></body><script>newVue({
        el:'#keyTest',
        data:{
            items:[{message:'Foo', id:"1"},{message:'Bar', id:"2"}]},
        mounted:function(){
            document.getElementById("unchange").nextElementSibling.style.color="red";
            document.getElementById("change").nextElementSibling.style.color="red";},
        methods:{
            changeOrder:function(){let newItems=[];
                newItems.push(this.items[1]);
                newItems.push(this.items[0]);this.items= newItems;}}});</script></html>

例子包含2个v-for循环,一个不包含key,一个包含key;初始化时会对列表的第一个元素加一个颜色的样式;然后点击按钮触发数组顺序变更,可以看到不包含key的v-for仍然是第一个元素为红色(即dom本身的顺序没有变化),而包含key的v-for则是第二个元素为红色(即dom的顺序发生了变化):
Vue学习笔记v-for的key

v-for不指定key的应用场景相对较少,多应用于需要高亮显示按条件排序后的前xx条数据(比如需要高亮显示收入排名前三位的职业,然后触发了倒序重排,需要高亮显示收入排名后三位的职业)。

  • 作者:讨厌走开啦
  • 原文链接:https://liqing.blog.csdn.net/article/details/88652824
    更新时间:2022年6月11日12:25:36 ,共 1224 字。