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>

运行:

相关推荐
qq_124987075323 分钟前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
科兴第一吴彦祖1 小时前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭1 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo2 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
木心操作3 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing3 小时前
sqb&ks二面(准备)
前端·javascript·面试