v-for为什么要加key

简介: v-for为什么要加key
本节内容:在日常开发中,经常会使用 v-for进行遍历,但是每次使用其时,都要被强制的加上 key,那么key究竟起着什么样的作用?话不多说,我们先看一个案例

一、案例

源码:

<div>
  <input type="text" v-model='name'>
  <button @click='add'>添加</button>
</div>
<ul>
  <li v-for='(item, i) in nameList' :key='item.id'>
    <input type="checkbox"> {{item.name}}
  </li>
</ul>
</div>
<script>
const HelloVueApp = {
  components: {
    getTitleComponent,
    toDoList
  },
  data() {
    return {
      bookTitle: '',
      selectVal: '',

      nameList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      name: '',
      newId: 3
    }
  },
  methods: {
    add () {
        // 注意是 unshift 添加,将在头部添加元素
      this.nameList.unshift({id: ++this.newId, name: this.name})
      this.name = ''
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>

1、不加key值时

在这里插入图片描述

2、加key值时

在这里插入图片描述

  • 通过以上两个结果我们可以看出,当我们没加key值时,没有 key 属性,状态默认绑定的是位置;加上key值有 key 时,状态根据key的值绑定到了相应的数组元素上
  • vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 ,key的作用主要是为了高效的更新虚拟DOM。
  • 由于key的唯一性,尽量把id作为key值。index索引的话因为并不具有唯一性,不能作为key值

Vue中这样说道:维护状态,当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
在Key的语法当中我们得知:特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示,以在比对新旧节点组时辨识 VNodes。如果不使用 key,Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时,它会基于 key 的顺序变化重新排列元素,并且那些使用了已经不存在的 key 的元素将会被移除/销毁。

  • 一张图带你更深入的理解,如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

在这里插入图片描述

相关文章
|
JavaScript
TypeScript中模块的导入与导出技术详解
【4月更文挑战第23天】TypeScript模块化通过`export`和`import`实现代码组织。导出包括变量、函数、类、接口,支持命名导出和默认导出。导入时,命名导出使用花括号指定成员,默认导出直接引用,还可使用`as`重命名。模块机制促进代码复用、解耦,提升可维护性。理解并运用这些技术对构建大型应用至关重要。
|
缓存 JavaScript Windows
windows环境下NPM / NodeJS的安装配置
npm(node package manager):nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) 本文主要讲解如何搭建npm环境
7760 0
windows环境下NPM / NodeJS的安装配置
|
3月前
|
JSON API UED
快递查询 API 对接指南(Python示例)
在电商与物流快速发展背景下,实时快递查询成为系统开发常见需求。本文介绍如何通过快递查询API快速集成物流信息,提升自动化水平与用户体验,并提供Python调用示例及问题解决方案。
309 0
|
机器学习/深度学习 编解码 算法
【图像融合】基于加权 IHS PCA三种像素级算法实现遥感图像融合附matlab代码
【图像融合】基于加权 IHS PCA三种像素级算法实现遥感图像融合附matlab代码
【图像融合】基于加权 IHS PCA三种像素级算法实现遥感图像融合附matlab代码
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
203 0
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
|
12月前
|
开发框架 监控 搜索推荐
GoFly快速开发框架集成ZincSearch全文搜索引擎 - Elasticsearch轻量级替代为ZincSearch全文搜索引擎
本文介绍了在项目开发中使用ZincSearch作为全文搜索引擎的优势,包括其轻量级、易于安装和使用、资源占用低等特点,以及如何在GoFly快速开发框架中集成和使用ZincSearch,提供了详细的开发文档和实例代码,帮助开发者高效地实现搜索功能。
594 0
|
12月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
835 0
|
11月前
|
前端开发 开发工具 Android开发
跨平台开发工具
跨平台开发工具
420 6
|
编译器 C语言 Windows
windows MinGW C语言编译器安装及环境变量配置教程
MinGW被称为Windows版的GCC,安装包下载地址:提示:该安装包下载完之后,相当于安装好了MinGW,之后即可配置环境变量!所以,可以先新建好一个专门用来存放MinGW安装包的文件夹。
560 2
|
编译器 C语言 C++
Windows下配置GCC(MinGW)环境
Windows下配置GCC(MinGW)环境
3660 0