首页 > 其他分享 >vue中key有什么作用(key的内部原理)

vue中key有什么作用(key的内部原理)

时间:2022-11-01 21:22:27浏览次数:75  
标签:真实 vue DOM 虚拟 key 原理 逆序

虚拟DOM的key的作用:
  key是虚拟DOM对象的标识,当状态中的数据发生变化的时候,vue会根据新的数据生成新的虚拟DOM,随后vue进新虚拟DOM与旧虚拟DOM的差异比较
  

  (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:

      若虚拟DOM中内容没变,直接使用之前的真实DOM

      若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

  (2)旧虚拟DOM中未找到与新虚拟DOM相同的key

      创建新的真实DOM,随后渲染到页面

3、用index作为key可能会引发的问题

  (1)若对数据进行:逆序添加、逆序删除等破坏顺序操作:

      会产生没有必要的真实DOM更新 ==> 界面效果没问题,但效率低。

  (2)如果结构中还包含输入类的DOM

      会产生错误DOM更新 ==> 界面有问题。

4、开发中如何选择key?:

  (1)最好使用每条数据唯一表示作为key,比如id、手机号、身份证号、学号等唯一值。

  (2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,

      使用index作为key是没有问题的

标签:真实,vue,DOM,虚拟,key,原理,逆序
From: https://www.cnblogs.com/bjyx-805105/p/16849202.html

相关文章

  • 【2022-11-01】前端Vue框架(六)
    一、Vuex的使用Vuex基本使用#在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意......
  • vuex的使用,vue-router的使用,路由守卫
    vuex的使用Vue-router的使用基本使用路由的跳转路由跳转携带参数路由嵌套路由守卫vuex的使用vuex是vue的一个插件,大大提升了vue的功能在Vu......
  • redis淘汰key的算法LRU与LFU的区别
    lru:leastrecentlyused,最近最少使用:淘汰很久没被访问的数据,以最近一次访问的时间做参考lfu:leastfrequentlyused,最不经常使用:淘汰最近一段时间被访问次数最少的数据......
  • Vue学习-06
    一、Vuex的使用vue的插件,增强了vue的功能在vue中实现集中状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适......
  • 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
    目录路由的拆分VUEX模块拆分ElementUI库按需加载的优雅写法路由的拆分项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管......
  • 学习Vue3 (三)
    computed用法计算属性就是当依赖的属性的值发生变化的时候,才会触发他的更改,如果依赖的值,不发生变化的时候,使用的是缓存中的属性值。1函数形式<template><div>......
  • gp map的底层实现原理
    gomap的底层实现是hashtable,根据key查找vlue的时间负责度是O(1)先通过哈希算法得出哈希值对算出来的哈希值进行对槽位总数取模找到对应槽位如果冲突多的话,需要以......
  • 学习vue3(二)
    reactive用来绑定复杂的数据类型例如对象数组,他是不可以绑定普通的数据类型这样是不允许会报错绑定普通的数据类型我们可以使用昨天讲到ref你如果用ref去绑定对象......
  • 在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播
    轮播图左右的切换按钮、如果点击没有反应,控制台也没有报错。很大可能是==版本问题==。如果不指定版本信息、默认安装的是最新的版本。版本过高或者过低都有可能导致无效。......
  • autoreleas实现原理
    静态库和动态库的区别1、形式上静态库是.a和.framework。动态库是.dylib和.framework,xcode8为.tbd,本质是.dylib2、使用上:静态库,链接时,会被完整的复制到可执行......