前端js-----vue中的key

最新推荐文章于 2023-08-07 22:30:05 发布
最新推荐文章于 2023-08-07 22:30:05 发布
阅读量561 收藏
点赞数
分类专栏： Web前端 JavaScript 分享一下我的心得 文章标签： vue 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47339511/article/details/113544234
版权

在官方文档中是这样解释的：key的特殊属性主要用在vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不能使用key，Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时，它会基于key的变化重新排列元素顺序，并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到（1）完整的触发组件的生命周期钩子（2）触发过度。场景时，key可能会很有用

总结：我们要利用key属性的优点，必须保证同一父元素的所有子元素有不同的key属性。在有了key属性之后，Vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性时的就地复用策略效率更高。然后就是在过渡中使用key，当有相同标签名的元素切换时，需要通过key特性设置唯一值来标记，让Vue区分它们，否则Vue会为了性能只会替换相同标签内部的内容。

Diff算法三个对比：
（1）同层级对比
（2）同key值对比
（3）同组件对比

Lsx～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发：Vue中key属性的作用详解
软贱开发攻城狮
05-31 3245
这里的key一般指的是key值，它主要用来管理可重复使用的元素，也就是可复用的元素。由于在浏览器中操作DOM是很昂贵的，频繁的操作DOM会产生一定的性能问题，这就是虚拟Dom的诞生原因。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。虚拟DOM的实现原理主要包括3个部分：第一，用JavaScript对象模拟真实DOM树，对真实 DOM 进行抽象。第二，使用diff算法，比较两棵虚拟 DOM 树的差异，其中diff算法的特点：一，先进行同级比较，再比较子节点；
vue-router,vue
05-26
Vue.js 是一款非常流行的前端JavaScript框架，它以其轻量级、高效和易用性而备受开发者喜爱。Vue Router 是 Vue.js 官方推荐的路由管理器，它与 Vue.js 深度集成，使得在单页应用（SPA）中管理页面路由变得简单直观...
vue 用key拿对象value_vue.js中key的用法
weixin_39600328的博客
12-19 2144
刚学vue.js，看着官方API学习的，文档中的KEY属性一直没搞懂，感觉有key没key没什么区别。html：key的使用实例：{{item.text}},{{item.value}}{{item.text}},{{item.value}}js：var text = new Vue({el: ".v-text",data: {itemList: [{text: 1, value: "hi1"},...
Web前端-Vue学习笔记——key的作用与原理
a1204942755的博客
09-27 1133
面试题：react、vue中的key有什么作用？（key的内部原理） 1.虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟OM相同的key: ①若虚拟DOM中内容没变，直接使用之前的真实DOM ...
vue.js（09）--v-for中的key
baiqiu2777的博客
08-13 102
v-for中key的使用注意事项 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
vue 中的 key
Aurora9968的博客
05-30 537
概念：页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是那一条!所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!作用：更准确、更快速、提高效率。
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue-admin-template是基于Vue.js的一个后台管理系统模板，它提供了一个快速开发后台应用的基础架构。这个模板通常包含路由、组件、状态管理（Vuex）以及...
前端学习笔记-黑马程序员Vue
01-09
Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js 特点 1. 初始 Vue：Vue.js 的...
前端开发-vue级联地址选择器的纯前端实现-基于javascript来实现.zip
04-02
在前端开发中，Vue.js作为一个流行的JavaScript框架，常被用于构建用户界面，提供高效的数据绑定和组件化功能。本项目“Vue级联地址选择器的纯前端实现”着重讲解如何利用Vue.js和JavaScript来创建一个交互式的地址...
Vue前端框架——列表渲染时key的重要性
weixin_45661229的博客
09-28 678
因为将新数据添加的原数据的尾部按照顺序生成虚拟 DOM 后新数据的 key 应该为3，key 为3的话旧虚拟 DOM 中没有，那就只能乖乖的将新数据的整个 li 元素转换为真实 DOM。剩下的对比都遵循这个逻辑，依次生成真实 DOM，但是对比到最后一个发现 key 为3的在旧虚拟 DOM 中不存在，那就直接将 key 为3的 li 元素整个转换成真实 DOM，最后就出现了数据错乱的样子。在将索引作为 key 的那一小节中，大篇幅的讲解了其中的原理以及 Vue 的虚拟 DOM 对比算法是如何进行对比的。
Vue前端面试题总结（三十二 ）Vue Key的作用 详解
Rick_and_mode的博客
09-18 834
Key值的作用 key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染 其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了 vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法 当页面的数据发生变化时，Diff算法只会比较同一层级的节点： 如果节点类型不同，直接干
Vue中 key的作用与原理
weixin_51735748的博客
08-07 2416
你真的了解Vue中的key吗？
【vue前端面试】key的作用与原理/虚拟DOM/diff算法原理/代码效果
sweethhheart的博客
02-05 687
本文中涉及了v-for中key的取值、虚拟DOM与真实DOM、diff算法原理等。
【前端面试】React中的key是什么，它有什么作用？
椰卤工程师的个人博客
11-29 437
标识唯一性 比如在React的源码中，reconcileSingleElement协调方法，key用来比较两个元素，看能不能实现复用，如果能复用就直接使用该元素，不能则创建一个新的元素。 if key === null and child.key === null,then this only applies to 数组进行对比 原先是一个链表结构，不方便取值，这时我们可以通过数组来完成。 更新结点时需要key值判断是否相同元素。 此外在fiber中，通过map图，用get方法拿到key值，就能获取对应
【Vue】Vue 中的 key 有什么作用？（key 的内部原理）
y_coder的博客
03-22 228
然后再对比后面的 DOM，发现 key 一样而且里面的内容也完全一样，故不需要进行更新。若遍历时用 index 作为 key，因为 Vue 使用虚拟 DOM 对比算法以后，发现 input 并没有更新，而 input 里面输入的内容残留在真实 DOM 里面，故 input 里的内容并没有跟随列表更新。key 是虚拟 DOM 对象的标识，当状态中的数据发生变化时，Vue 会根据【新数据】生成【新的 DOM】，随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较，比较规则见下文。
【前端学习 - Vue (10) Vue 中的 key 有什么作用？】
weixin_60364883的博客
09-05 355
Vue 中的 key 有什么作用？
Vue中key属性的作用
weixin_42910765的博客
12-25 683
Vue中key属性的作用 在列表渲染时使用key属性 使用key属性强制替换元素 在列表渲染时使用key属性 相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候，如果不使用key属性，Vue会产生警告，那么在这个时候key属性的作用是什么呢？ 当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移...
Vue中的key的作用及原理——diff算法
weixin_47342624的博客
09-27 609
在没有key的时候我们的效率是非常低效的；在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
vue vue-grid-layout 代码
最新发布
04-25
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成多个独立的组件，每个组件负责自己的逻辑和样式。Vue具有简洁易学的语法和高效的性能，因此在前端开发中得到了广泛应用。 Vue-grid-layout是Vue的一个插件，用于实现网格布局。它提供了一个可拖拽和可调整大小的网格系统，使得开发者可以轻松地创建灵活的布局。通过使用vue-grid-layout，开发者可以将页面元素按照网格的形式进行排列，并且可以通过拖拽和调整大小来改变元素的位置和尺寸。 以下是一个简单的示例代码，展示了如何在Vue中使用vue-grid-layout： ```html <template> <div> <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"> <div v-for="item in layout" :key="item.i" :data-grid="item"> {{ item.i }} </div> </vue-grid-layout> </div> </template> <script> import VueGridLayout from 'vue-grid-layout'; export default { components: { VueGridLayout }, data() { return { layout: [ { x: 0, y: 0, w: 2, h: 2, i: '1' }, { x: 2, y: 0, w: 4, h: 2, i: '2' }, { x: 6, y: 0, w: 2, h: 4, i: '3' } ] }; } }; </script> ``` 在上面的代码中，我们首先导入了vue-grid-layout插件，并将其注册为Vue的组件。然后，在模板中使用`vue-grid-layout`标签来创建一个网格布局容器。通过设置不同的属性，我们可以定义网格的列数、行高、是否可拖拽和调整大小等。在`vue-grid-layout`标签内部，我们使用`v-for`指令来遍历`layout`数组，并将每个元素渲染为一个网格项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值