在虚拟DOM和Diff算法中为什么不建议使用index作为key值？

key是什么

key是虚拟DOM的一个重要标识，在DIff算法中，key对我们的性能也有着至关重要到的作用，有key就可以优化Diff算法，提高渲染性能；

key在页面更新的时候做了什么

1、首先，当我们进行一个页面更新，比如说新添加了一行数据，此时我们会生成一个新的DOM树；

2、通过key值，定位到两个DOM树节点所在位置；
（1）如果两个DOM树内容比对，没发生变化，我们直接使用原来的真实DOM
（2）如果新旧DOM树节点发生了变化就替换掉之前旧的虚拟DOM,生成新的真实DOM
（3）如果没找到同样的key值，直接生成新的真实DOM

如果是以index作为key值

根据上图可以看出，新增加一条数据，就生成了三个真实DOM，生成新的真实DOM是比较消耗性能的。所以用index作为key值对性能来说并不是最优的。

如果是以id作为key值

根据上图我们可以发现，因为id具有唯一性，所以通过id对比新旧节点DOM，添加几条数据，就会生成几条DOM；

在虚拟DOM和Diff算法中为什么不建议使用index作为key值？相关推荐

虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
vue--mixin混入以及虚拟DOM和diff算法
mixin混入使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼虚拟dom的定义与 ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数创建虚拟节点 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
浏览器性能优化（2）React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
【总结】1135- 图解虚拟 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014 1. 目录 1. 相关知识点: 2. 虚拟DOM(Virtual DOM) 2.1. 什么是虚拟DOM 2 ...