Vue深入理解之v-for中key的真正作用

目录
  • 前言
  • 第一种： key 采用 index
  • 第二种：key 采用唯一 ID
  • 总结

前言

大家应该都知道， v-for 中 key 最常用的绑定方式有两种：

  • 第一种用 index
  • 第二种用 唯一 id

那么接下来笔者将用几个小案例来讲述这两种方式在渲染时有什么明显的差别。

第一种： key 采用 index

我们先来看看代码

<template>
  <div class="root">
    <div class="item" v-for="(item, index) in list" :key="index">
      <h2>{{ item.text }}</h2>
    </div>
    <button @click="replaceData">替换数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {text: '33333'},
        {text: '66666'},
        {text: '99999'},
      ]
    }
  },
  methods: {
    replaceData() {
      this.list = [
        {text: '22222'},
        {text: '44444'},
        {text: '88888'},
      ]
    }
  }
}
</script>
<style lang="scss">
.item{ background: orange;}
</style>

这里我们渲染了 list 数组，并将 index 作为 key ，然后还添加一个替换数据按钮事件，我们来看看效果

当我们点击替换数据 这个按钮时，数据变成这样

一切看起来很正常对吧，接下来就是重点了，我们要做点小改动，首先我们先刷新下页面让数据恢复成原来的，然后我们将第二条给手动删掉

现在仅剩下 33333 和 99999，此时我们去点击替换数据 看看有什么效果

咦，它只替换了第一条和第三条，原来的第二条被我们刚刚删掉了，导致 44444 没有渲染出来，这是为啥呢？其实很简单，因为替换数据那批数组的 index 跟第一批数组是一样，Vue 判断是相同后又何必创建 Dom 这种浪费资源的操作呢，所以它并不会给第二条重新创建 Dom ，这便是 index 作为 key 的作用。

Note：表面视图没变化，但数据是有更新的，你去访问 list时，里面还是有三条数据22222,44444, 88888，只要记住 Vue 是以数据为驱动而不是视图。

第二种：key 采用唯一 ID

接下来我们来看下第二种，代码如下

<template>
  <div class="root">
    <div class="item" v-for="(item) in list" :key="item.id">
      <h2>{{ item.text }}</h2>
    </div>
    <button @click="replaceData">替换数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {text: '33333', id: 1},
        {text: '66666', id: 2},
        {text: '99999', id: 3},
      ]
    }
  },
  methods: {
    replaceData() {
      this.list = [
        {text: '22222', id: 4},
        {text: '44444', id: 5},
        {text: '88888', id: 6}
      ]
    }
  }
}
</script>
<style lang="scss">
.item{ background: orange;}
</style>

代码和上面差不多，只是新增了 id 并绑定到 key 里面，

接下来我们参考上面的流程走一遍看看这次有什么不同之处。

聪明的你已经看出来了，删掉第二条后，点击调换数据 会生成新的三条出来，而不是两条，原理我相信你也懂了，替换数据的那批 id 与上一批不一样，所以 Vue 比较后发现不同就帮我们生成新的 Dom

以上便是使用 index 和 唯一 id 的明显区别

另外，像 唯一id 不止上面这一种绑定方式，我们也可以在 v-for 里面使用 :key="Math.random()" 生成唯一id，但这种会有一些细微的差别，这里笔者就不去举例了，至于使用哪种 key 可以提升性能方面的相关知识不是本章的初衷，读者可以自行到网上搜索，相信你只要能理解上面这两种绑定 key 的作用差别在哪里，那么其它的绑定方式对你来讲一定不是难题。

总结

到此这篇关于Vue深入理解之v-for中key真正作用的文章就介绍到这了,更多相关Vue v-for中key作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue中v-for的key唯一性

    详解vue中v-for的key唯一性

    1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中使用v-for时为什么不能用index作为key

    结论: 更新DOM的时候会出现性能问题 会发生一些状态bug React 中的 key 也是如此 如果已经了解 为什么要用key,可以通过目录直接跳到下一节. 为什么要用key? Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 同一

  • 浅谈VUE中演示v-for为什么要加key

    浅谈VUE中演示v-for为什么要加key

    说到这个问题想必要举个例子了 没有key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"> <

  • Vue深入理解之v-for中key的真正作用

    Vue深入理解之v-for中key的真正作用

    目录 前言 第一种: key 采用 index 第二种:key 采用唯一 ID 总结 前言 大家应该都知道, v-for 中 key 最常用的绑定方式有两种: 第一种用 index 第二种用 唯一 id 那么接下来笔者将用几个小案例来讲述这两种方式在渲染时有什么明显的差别. 第一种: key 采用 index 我们先来看看代码 <template> <div class="root"> <div class="item" v-for=&

  • Vue中key的作用示例代码详解

    Vue中key的作用 key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改.复用相同类型元素的算法,而使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素.此外有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误. 描述 首先是官方文档的描述,当Vue正在更新使用v-for渲染的元素列表时,它默认使用就地更新的策略,如果数据项的

  • Vue页面渲染中key的应用实例教程

    Vue页面渲染中key的应用实例教程

    引言 在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码值转换及字段信息展示均有问题. 问题分析 通过阅读代码结构,发现el-table-column通过template循环生成,由于template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上.有关表格数据渲染中key的作用如下: key作为一个DOM节点

  • Vue中key的作用及原理详解

    Vue中key的作用及原理详解

    目录 1. 先说结论 2. key的作用 2.1 举一个例子 2.2 修改一下上述示例 2.3 再修改一下示例 3. key的实现原理 1. key为index的情况. 2. key为id的情况. 总结 1. 先说结论 key在Vue是DOM对象的标识: 进行列表展示时,默认key是index: 如果数据只做展示使用,使用index作为key是没有任何问题的: 如果使用index作为key,而后续操作会破坏顺序,一定会带来效率问题,严重时会渲染出错误的DOM 关于key的作用及实现原理,下面一一

  • vue v-for中key的原理详析

    vue v-for中key的原理详析

    目录 前言 key是什么 逻辑 设置key与不设置key 的区别 设置key值一定能提高diff效率吗? 原理分析 最后 前言 最近在面试的时候,面试官问我说v-for的key值是用来做什么的,我说是用来遍历dom元素的根节点的,当节点更新时,使用key 值来判断是都需要重新渲染更新页面,不会再更新之前已经被更新的内容.面试官问:还有吗?我:............自己觉得回答的挺美,但是咋感觉面试管的表情不太对呢? key是什么 常见方式 <div> <span v-for="

  • 浅谈Vue3中key的作用和工作原理

    浅谈Vue3中key的作用和工作原理

    这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes: 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法 而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除/销毁 key 不存在的元素. 先简单提一下我对VNode的理解: VNode的全称是Virtual Node,也就是虚拟节点: Vnode的本质是一个JavaScri

  • Vue深入理解插槽slot的使用

    Vue深入理解插槽slot的使用

    目录 一.插槽(slot)是什么 二.使用场景 三.slot的分类 默认插槽 具名插槽 作用域插槽 四.介绍对slot的理解 一.插槽(slot)是什么 slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件 例子: //父组件中 <Category> <div>html结构</div> </Category> //子组件中: &l

  • 深入理解r2dbc在mysql中的使用

    简介 mysql应该是我们在日常工作中使用到的一个非常普遍的数据库,虽然mysql现在是oracle公司的,但是它是开源的,市场占有率还是非常高的. 今天我们将会介绍r2dbc在mysql中的使用. r2dbc-mysql的maven依赖 要想使用r2dbc-mysql,我们需要添加如下的maven依赖: <dependency> <groupId>dev.miku</groupId> <artifactId>r2dbc-mysql</artifact

  • 详解React中key的作用

    详解React中key的作用

    要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值 在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =

  • Vue快速理解事件绑定是什么

    Vue快速理解事件绑定是什么

    目录 一.监听事件 二.事件修饰符 1.stop修饰符阻止事件冒泡 2.capture修饰符 3.self修饰符 4.prevent修饰符 5.键盘事件修饰符 6.鼠标事件修饰符 一.监听事件 监听事件一般使用的是v-on指令,可以在JavaScript代码中将v-on直接将写在代码上面,语法是:v-on:你所定的事件名=‘代码’,v-on指令可以接收到函数的调用,并且将其分成是无参数调用函数还是有参数调用函数.当然v-on函数可以简写成@+事件名的写法,很方便. 在初始化vue对象的时候要申明

随机推荐