key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异.

diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

  • 准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
  • 快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

Vue中的key到底有什么用？的更多相关文章

  1. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  2. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  3. React/Vue里的key到底有什么用？看完这篇你就知道了！（附demo代码）

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  4. Vue2.0 v-for 中 ：key 到底有什么用？

    要解释 key 的作用,不得不先介绍一下虚拟 DOM 的 Diff 算法了. vue 和 react 的虚拟 DOM 的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的 ...

  5. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  6. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

  7. 015——VUE中使用key唯一令牌解决表单值混乱问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. mysql 中UNIQUE KEY 到底是约束还是索引？

    答案来自:https://zhidao.baidu.com/question/1863373387452612907.html 两者关系 unique索引包含了unique约束,因为unique约束是 ...

  9. Vue2.0 v-for 中 :key 到底有什么用？

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

随机推荐

  1. spring cloud consul上下线体验

    spring cloud consul中默认会将spring.application.name作为ID 同一服务起多个实例时,ID默认会变成${spring.application.name}-${s ...

  2. SrpingMVC通过JSON注入from数据到实体自定义(LocalDateTime,LocalDate,Boolean类型)字段的序列化、反序列化方法

    import com.fasterxml.jackson.core.JsonParser; import com.fasterxml.jackson.core.JsonProcessingExcept ...

  3. Linux服务器端使用tcpdump抓redis报文

    yum update yum install tcpdump tcpdump host -i ens192 -w /tmp/redis-zsetcapture.cap 其中ens192是网卡名, /t ...

  4. 数据库版本管理工具--Flyway的使用

    软件开发正常流程是:开发环境 ---> 测试环境  ----> 产环境 在开发过程中经常需要变更数据库: 表结构变更. 基础数据变更. 最直接的做法是:用客户端连上数据库直接修改. 依次修 ...

  5. CentOS下安装Docker CE教程

    一.安装前准备 1.硬件要求 CentOS 7(64-bit),内核版本不能低于3.10: CentOS 6.5(64-bit或更新的版本),内核版本为 2.6.32-431 或者更高版本,一般不建议 ...

  6. Java虚拟机new对象

    类加载检查java虚拟机在遇到一条 new 指令时,首先会检查是否能在常量池中定位到这个类的符号引用,并且是否已被加载过.解析和初始化过.如果没有,那必须先执行类加载过程 类加载的相关知识可参考:JV ...

  7. 学校或公司转ISP -boardband (上网公司）注意事项记录

    如果学校或公司轉boardband , 1. 要更新 domain IP (亦可以轉移domain 去新ISP公司, 要HKDNR 登入名稱和密碼,可問舊ISP即boardband 公司或域名管理方要 ...

  8. Unity热更新 xLua

    xLua是Unity3D下Lua编程解决方案,自2016年初推广以来,已经应用于十多款腾讯自研游戏,因其良好性能.易用性.扩展性而广受好评.现在,腾讯已经将xLua开源到GitHub. 2016年12 ...

  9. mysql 数据库的基本操作

    day 41 MySql 一. 为啥使用数据库? 因为之前使用文件(Excel)管理数据, 但是数据量特别大的时候,使用Excel管理 的话, 就比较的麻烦了因此引入一个新的数据管理软件 : 数据库软 ...

  10. python安装第三方库报错：Cannot uninstall '***'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.

    pip install --ignore-installed ${PACKAGE_NAME}