IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue简单介绍Key作用与原理 -> 正文阅读

[JavaScript知识库]Vue简单介绍Key作用与原理

Vue简单介绍Key作用与原理

问题:

  • 如果不写key,Vue会做什么?
  • 如果写了key,用什么作为key会更加合适?
    在这里插入图片描述
    📢 key是为节点做标识,相当于节点的一个身份证号 🆔

如果不写key,Vue会做什么?

如果没有写key,Vue将自动将index索引值作为key。这种没有手动制定key的情况在react下是不允许的🙅?♂?,所以在Vue里也不推荐这么写。有时会导致一些非常奇怪的问题。

  1. 若对数据进行:逆序添加,逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新,界面效果没问题,但效率低
  2. 如果结构中还包含输入类的DOM
    会产生错误DOM更新,界面会出现问题??

如果写了key,用什么作为key会更加合适?

  1. 开发中最好使用每条数据的唯一标识作为Key,比如id,手机号等等
  2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

原理 💿

面试题: react,vue中的key有什么作用??(key的内部原理)

虚拟DOM中key的作用:
key是虚拟DOM的对象的标识,当状态中的数据发生变化时,Vue会根据「新数据」生成「新的虚拟DOM」,随后Vue进行「虚拟DOM」与「旧虚拟DOM」的差异比较,比较的规则如下

  • 旧虚拟DOM中找到了新虚拟DOM相同的Key:
    · 若虚拟DOM中的内容没变,直接使用之前真实DOM
    · 若虚拟DOM中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
  • 旧虚拟DOM中未找到与新虚拟DOM相同的key
    · 创建新的真实DOM,随后渲染到页面 📃
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-30 12:28:21  更:2021-10-30 12:29:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/10 17:28:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码