Vue学习笔记(四)——v-for的key

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body>
<div id="keyTest">
    <span id="unchange">dom未重新渲染span>
    <div v-for="item in items">
        <span>{{item.message}}span>
    div>
    <span id="change">dom有重新渲染span>
    <div v-for="item in items" :key="item.id">
        <span>{{item.message}}span>
    div>
    <button type="button" @click="changeOrder">changeOrderbutton>
div>
body>
<script>
    new Vue({
        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_第1张图片

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

你可能感兴趣的:(Vue)