vue中key的用法

加key是提升vue渲染效率,减少DOM操作。

vue列表元素的更新机制:

当列表元素没有设置key的时候,vue判断是否操作这个DOM元素,是根据新旧两次数据的元素顺序进行对比,看一下元素内容是否发生变化。发生变化vue就操作这个DOM元素,没有变就不操作这个DOM元素。

当列表元素设置了key的时候,vue判断新旧dom内容是否发生变化的时候,不再按照顺序对比了,而是找相同key值得元素进行对比,不受顺序得影响了。能始终保证只操作变化了得DOM元素。

**问题:**遍历数据得索引能否作为key值?

不能,因为索引是按元素顺序生成的。且始终从0开始,因此和不设置key效果一样了。

案例:

不加:key="item":

javascript 复制代码
<template>
  <div>
    <h3 style="color: #f69">key的用法</h3>
    <p v-for="item in arr">{{ item }}</p>
    <!-- <button @click="arr.push(4)">添加</button> -->
    <button @click="arr.unshift(4)">添加</button>
    <!-- 用:key 元素单个添加,不改变原有元素,不用:key 元素都变动,改变原有元素 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  methods: {},
  created: {},
};
</script>

运行:

加key="item":

javascript 复制代码
<template>
  <div>
    <h3 style="color: #f69">key的用法</h3>
    <p v-for="item in arr" :key="item">{{ item }}</p>
    <!-- <button @click="arr.push(4)">添加</button> -->
    <button @click="arr.unshift(4)">添加</button>
    <!-- 用:key 元素单个添加,不改变原有元素,不用:key 元素都变动,改变原有元素 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3],
    };
  },
  methods: {},
  created: {},
};
</script>

运行:

相关推荐
技术钱14 分钟前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
kyle~20 分钟前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light6034 分钟前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏1 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~3 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟3 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐3 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA5 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding915 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou335 小时前
使用 Service Worker 限制请求并发数
前端