Vue学习笔记v-for的key-手赚鸭

Vue学习笔记v-for的key

参考文档：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