Vue中的key到底有什么用？
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到底有什么用？的更多相关文章
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- vue中：key 和react 中key={} 的作用，以及ref的特性？
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- React/Vue里的key到底有什么用？看完这篇你就知道了！（附demo代码）
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- Vue2.0 v-for 中 ：key 到底有什么用？
要解释 key 的作用,不得不先介绍一下虚拟 DOM 的 Diff 算法了. vue 和 react 的虚拟 DOM 的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的 ...
- Vue中使用key的作用
key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...
- vue 中$index $key 已经移除了
https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...
- 015——VUE中使用key唯一令牌解决表单值混乱问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mysql 中UNIQUE KEY 到底是约束还是索引？
答案来自:https://zhidao.baidu.com/question/1863373387452612907.html 两者关系 unique索引包含了unique约束,因为unique约束是 ...
- Vue2.0 v-for 中 :key 到底有什么用？
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...
随机推荐
- SHA加密
import java.security.MessageDigest; /** * 提供SHA加密 */ public class SHAUtil { // 进行SHA-1加密 public stat ...
- C#WinForm程序显示控制台窗口Console
启动一个WINFORM项目,使用一些API函数将控制台显示出来: AllocConsole 和 FreeConsole. 本程序只在DEBUG模式下显示控制台 [DllImport("ker ...
- 001-tomcat下载、解压、启动、开机启动
一.tomcat作用 Tomcat就是Servlet容器 下载解压 下载:找到合适版本下载使用即可 http://tomcat.apache.org/ window 下载zip解压 linux上使用 ...
- 自己的框架引入smarty的问题
这段时间自己学着写PHP的MVC框架,想把Smarty 作为view类加载, 可是自动加载它的时候就出错. 无论改文件名,还是改变路径,都无法解决问题, 我搜索一下相关问题,发现是自动加载Smarty ...
- idea使用generatorconfig生成
在maven工程中的resource中创建generatorConfigxml配置generatorConfigxml的配置pomxml生成对象的两种方式方式一使用idea的maven插件直接快速生成 ...
- ceph常用命令（3）
1.查看集群配置信息 ceph daemon /var/run/ceph/ceph-mon.$(hostname -s).asok config show 2.在部署节点修改了ceph.conf文件, ...
- python之selenium元素定位方法
前提: 大家好,今天我们来学习一下selenium,今天主要讲解selenium定位元素的方法,希望对大家有所帮助! 内容: 一,selenium定位元素 selenium提供了8种方法: 1.id ...
- 禁止crontab -r清空定时任务列表误操作
关于crontab 1.附件cron.sh放/usr/bin目录下面 2.在/etc/bashrc文件末尾添加 alias crontab='/usr/bin/cron.sh' 或者在当前root用户 ...
- APP安全测试要点
APP面临的威胁 APP评估思路 APP自动化检测思路 安全测试要点 证书和签名 将apk文件更名为zip 使用unzip解压 META-INF中包含签名文件和真正的CERT.RSA文件(公钥证书自签 ...
- 记录运行时间 StopWatch