通过 key 管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：

xxxxxxxxxx
<template>
    <div>
        <p v-for="(item,index) in names" :key="index">{{ item }}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            names:["百战程序员","尚学堂","IT"]
        }
    }
}
</script>

温馨提示

key 在这里是一个通过 v-bind 绑定的特殊 attribute

推荐在任何可行的时候为 v-for 提供一个 key attribute

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型

key的来源

请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化

xxxxxxxxxx
<template>
    <div v-for="(item,index) in result" :key="item.id">
        <p>{{ item.title }}</p>
        <img :src="item.avator" alt="">
    </div>
</template>
<script>
export default {
    data() {
        return {
            result: [{
                "id": 2261677,
                "title": "鄂尔多斯｜感受一座城市的璀璨夜景 感受一座城市，除了白日里的车水马龙，喧嚣繁华之",
                "avator": "https://pic.qyer.com/avatar/002/25/77/30/200?v=1560226451",
            },
            {
                "id": 2261566,
                "title": "成都这家洞穴暗黑风咖啡厅酷毙了‼️早C晚A走起☕️ 成都天气这么热? 咖啡?人必",
                "avator": "https://pic.qyer.com/avatar/011/07/08/69/200?v=1572185180",
            },
            {
                "id": 2261662,
                "title": "【川西新龙—措卡湖】措卡湖，意为“乱石丛中的黑色海水”，神秘小众 原汁原味。 深",
                "avator": "https://pic.qyer.com/avatar/009/88/48/58/200?v=1507386782",
            },
            ]
        }
    }
}
</script>