vue v-for中key的原理详析

目录
  • 前言
  • key是什么
    • 逻辑
  • 设置key与不设置key 的区别
    • 设置key值一定能提高diff效率吗？
  • 原理分析
  • 最后

前言

最近在面试的时候，面试官问我说v-for的key值是用来做什么的，我说是用来遍历dom元素的根节点的，当节点更新时，使用key 值来判断是都需要重新渲染更新页面，不会再更新之前已经被更新的内容。面试官问：还有吗？我：............自己觉得回答的挺美，但是咋感觉面试管的表情不太对呢？

key是什么

  • 常见方式
<div>
    <span v-for="item in items" :key="item.id">...</span>
</div>

2.时间戳：+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Component :key="+new Date()" />

我们常见的使用方式是这样，但是key的背后的逻辑是什么样的？ key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

逻辑

当我们在使用v-for时，需要给单元加上key

  • 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

  • 当拥有新值的rerender作为key时，拥有了新key的Component出现了，那么旧key Component会被移除，新key Component触发渲染。

设置key与不设置key 的区别

创建一个实例，2秒后往items数组插入数据

<body>
  <div id="demo">
     <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
  // 创建实例
  const app = new Vue({
      el: '#demo',
      data: {
      items: ['a', 'b', 'c', 'd', 'e']
      },
      mounted () {
          setTimeout(() => {
              this.items.splice(2, 0, 'f')
              }, 2000);
       },
     });
   </script>
   </body>

在不使用key的情况下：

分析下整体流程：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作
  • 比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作
  • 比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作
  • 循环结束，将E插入到DOM中

一共发生了3次更新，1次插入操作

在使用key的情况：vue会进行这样的操作：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C，F，不相同类型的节点
    • 比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作
  • 循环结束，将F插入到C之前

一共发生了0次更新，1次插入操作

通过上面两个小例子，可见设置key能够大大减少对页面的DOM操作，提高了diff效率

设置key值一定能提高diff效率吗？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，
并且确保它在特定索引下显示已被渲染过的每个元素

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

原理分析

function sameVnode (a, b) {
    return ( a.key === b.key && (
     ( a.tag === b.tag
       && a.isComment === b.isComment
       && isDef(a.data) === isDef(b.data)
       && sameInputType(a, b)
       ) || (
           isTrue(a.isAsyncPlaceholder)
           && a.asyncFactory === b.asyncFactory
           && isUndef(b.asyncFactory.error)
           )
         )
       )
    }

判断是否为同一个key，首先判断的是key值是否相等如果没有设置key，那么key为undefined，这时候undefined是恒等于undefined

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
...
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
    ...
    } else if (isUndef(oldEndVnode)) {
    ...
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
    ...
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
    ...
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
    ...
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    ...
    } else {
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
...
}

updateChildren方法中会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

最后

到此这篇关于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

  • 解决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中的:key详解

    不在v-for的标签中加入key时. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

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

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

  • Spring Boot 中starter的原理详析

    目录 1.springboot 的starter 的启动原理是什么 原理 来个例子 小结 2.springboot 是如何找到配置类的 3.springboot starter 的bean 是怎么加载到容器的 4.总结 前言: 今天介绍springboot ,也是写下springboot的插件机制,starter的原理,其实这个网上已经很多了,也是看了不少别人的文章,今天主要还是带着问题去记录下. 1.springboot 的starter 的启动原理是什么 原理 这个问题是很简单的,只要了解s

  • Vue 不定高展开动效原理详解

    Vue 不定高展开动效原理详解

    目录 使用场景 背景 实现 transition 组件 过渡效果原理 解决 使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复杂,也没有特殊的交互.唯一有一点难度应该是回答部分的展开特效. 展开时,需要从上往下将回答部分的 div 慢慢撑开,上面的箭头也要有旋转的特效. 收回时,需要从下往上将回答部分的 div 慢慢缩小,上面的箭头也要有旋转的特效. 对于一般的展开.隐藏特效,只需要在对应元素的 height 上面增加过渡效果即

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

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

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

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

  • Android中Lifecycle的原理详解

    Android中Lifecycle的原理详解

    目录 一.基本使用 二.LifecycleObserver接口和LifecycleOwner接口 三.getLifecycle() 四.绑定生命周期 总结 Lifecycle是Android Architecture Components的成员,是一个生命周期感知组件,能够感知Activity.Fragment等组件的生命周期变化,并将变化通知到已注册的观察者.正确的使用有助于更好地组织代码,减少内存泄漏,增强稳定.下面分析他的实现原理,看看到底只怎么感知生命周期的. 一.基本使用 1.引入依赖

  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    目录 一.node.js安装 二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本 三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建 六.项目创建 总结 一.node.js安装 进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

  • Vue开发实例探究key的作用详解

    目录 前言 为什么不推荐使用 index 作为 key? 如果 key 重复会导致什么样的错误? 使用 key 和不使用 key 有什么差别? key的实际应用 上述结论在Vue3中也成立吗? 总结 使用key 不使用key 前言 一提到 vue 中的 key,你会想到什么?使用v-for时需要使用 key ?key 不能重复?建议不要使用 index 来做key的值?这究竟是为什么呢?就下来我们就一起来通过实例来一探究竟. 为什么不推荐使用 index 作为 key? 我们先来看两个例子 为了

  • Java中synchronized实现原理详解

    记得刚刚开始学习Java的时候,一遇到多线程情况就是synchronized,相对于当时的我们来说synchronized是这么的神奇而又强大,那个时候我们赋予它一个名字"同步",也成为了我们解决多线程情况的百试不爽的良药.但是,随着我们学习的进行我们知道synchronized是一个重量级锁,相对于Lock,它会显得那么笨重,以至于我们认为它不是那么的高效而慢慢摒弃它. 诚然,随着Javs SE 1.6对synchronized进行的各种优化后,synchronized并不会显得那么

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

随机推荐