本文主要是介绍VUE3.0-通过key管理状态，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vue 默认按照"就地更新'的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引（位置上渲染。
为了给Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute
<template><h3>key属性添加到v-for中</h3><p v-for="(item, index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default {data() {return {names:['刘德华','张学友','周杰伦','林俊杰'],}}
}</script>温馨提示
key 在这里是一个通过 v-bind 绑定的特殊 attribute
推荐在任何可行的时候为 v-for 提供一个 key attribute
key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型
key的来源
请不要使用 index 作为 key 的值，我们要确保每一条数据的唯一索引不会发生变化
<template><h3>key属性添加到v-for中</h3><p v-for="(item, index) in names" :key="index">{{ item }}</p><div v-for="item in result" :key="item.id"><p>{{ item.title }}</p><img :src="item.avator" alt="">
</div>
</template>
<script>
export default {data() {return {names:['刘德华','张学友','周杰伦','林俊杰'],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.ever.com/avatar/e11/87/89/69/zcerx-4537218313e",},{"id":2261662,"title":"川西新龙-措卡湖】措卡湖，意为“乱石从中的黑色海水”，神秘小众 原汁原味。深","avator":"https://pic.qyer.com/avatar/009/88/48/58/200?V=1507386782",},],}}
}</script>这篇关于VUE3.0-通过key管理状态的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
