当前位置: 首页 > news >正文

Vue - 你知道Vue中key的工作原理吗

难度级别:中级及以上                                 提问概率:80% 


在Vue项目开发中,并不推荐使用索引做为key,以为key必须是唯一的,可以使用服务端下发的唯一ID值,也不推荐使用随机值做为key,因为如果每次渲染都监听到不一样的key,那么节点将无法复用,这与Vue节省性能的初衷是违背的。当Vue更新DOM时,它可以利用唯一的key来进行新旧节点的比较,基于这一特点,Vue在进行diff算法的时候,可以更加高效快捷的决定某些节点需要做移动、新增或是删除的操作,从而大大提升从虚拟DOM到真实DOM的更新效率。

那么Vue中key的工作原理是什么样的呢?首先虚拟DOM是一个大的数据对象,对象节点数据便是真实DOM的模拟实现,在真正更新DOM之前,需要对新旧虚拟节点进行比较;然后便会利用key值来比较两个新旧节点,Vue认为如果key相同,那么新旧节点就是同一个,不需要做出额外操作,从而达到复用节点的效果;而如果key值不同,那么Vue就需要进行移动、新增或是删除的操作。


相关文章:

  • opencv如何寻找图片轮廓
  • LeetCode 19.删除链表的倒数第N个结点
  • 《青少年成长管理2024》028 “成长七要素之五:能力”1/5
  • Git - 如何重置或更改 Git SSH 密钥的密码?
  • OpenHarmony实战:CMake方式组织编译的库移植
  • MySQL - MySQL架构设计
  • Linux——用户管理,文件压缩命令
  • 思科数通设备命令大全
  • 1.k8s简介
  • NOI - OpenJudge - 2.5基本算法之搜索 - 1490:A Knight‘s Journey - 超详解析(含AC代码)
  • docker使用arthas基本教程
  • python开发poc2,爆破脚本
  • 虹科Pico汽车示波器 | 免拆诊断案例 | 2019款别克GL8豪华商务车前照灯水平调节故障
  • 智能化办公时代来临:AI助你解放双手
  • 小程序实现订阅功能和测试发送订阅信息
  • 《Java8实战》-第四章读书笔记(引入流Stream)
  • 《深入 React 技术栈》
  • interface和setter,getter
  • Java精华积累:初学者都应该搞懂的问题
  • LintCode 31. partitionArray 数组划分
  • maven工程打包jar以及java jar命令的classpath使用
  • MaxCompute访问TableStore(OTS) 数据
  • Spring核心 Bean的高级装配
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • Unix命令
  • win10下安装mysql5.7
  • 产品三维模型在线预览
  • 排序(1):冒泡排序
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 数组的操作
  • const的用法,特别是用在函数前面与后面的区别
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (2)STM32单片机上位机
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (层次遍历)104. 二叉树的最大深度
  • (第一天)包装对象、作用域、创建对象
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (区间dp) (经典例题) 石子合并
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • (四)鸿鹄云架构一服务注册中心
  • (万字长文)Spring的核心知识尽揽其中
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET MVC 验证码
  • .NET 反射 Reflect
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .NET程序员迈向卓越的必由之路
  • .net和php怎么连接,php和apache之间如何连接
  • .net图片验证码生成、点击刷新及验证输入是否正确
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)