使用v-for时何以要加key

时间:?2021-08-30阅读:?225标签:?vue

何以要用key?

vuereact 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff挂线疗法。

vuereact 的虚拟DOM的Diff挂线疗法大概相同,其核心是基于两个简单的假设:

两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。同一层级的一组节点,他们可以越过绝无仅有的id进行区分。

当页面的数据发生变化时,Diff挂线疗法只会比较同一层级的节点:

假若节点类型不同,直接干掉前面的节点,再创建并插入新的节点。

假若节点类型相同,则会重新设置该节点的属性,为此实现节点的更新。

总起来讲,key的作用主要是以便高效的更新虚拟DOM 。另外vue中在使用相同标签名元素的短期切换时。也会使用到key属性,其目的也是以便让vue可以区分它们,要不然vue只会替换其之中属性而不会触发短期效果。

这边。也建议尽快在使用 v-for 时提供 key attribute。除非遍历输入的 DOM 内容非常简单。


何以不能用index行为key?

因为在插入数据可能删除数据的时候,会导致后头的数据的key绑定的index变化,进而导致从新渲染,效率会降低。

这个key应该绑定你v-for循环数据中的绝无仅有值,这一来就会大大节减渲染次数,数据更新时就不用一一替换,为此使用插入新数据的挂线疗法。


站长推荐

1.云服务推荐: 国内主流云投资商,各类云产品网的问道,淘宝优惠券怎么设置领取。地址:阿里云腾讯游戏平台官方下载云华为云

链接: http://www.pannellisolari.net/article/detial/10654

Vue.js中的computed工作原理_谈言微中理解 Vue的Computed计算属性

Computed 计算属性是 Vue 中日语常用口语的一个功能,但你理解它是怎么工作的吗?我们越过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。

vue框架开发出现页面空白,白屏的攻歼法门总汇

使用Vue-cli报架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白这个美术社大有问题。6.Vue只在iOS 10出现白屏这个美术社大有问题

Vue.js特等实践:五招让你变成Vue.js大师

本文面向对象是有一定Vue.js编程心得的开发者选项在哪里。假若有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发旺球体育在线网站

vue.extend拓展

Vue.extend返回的是一个“拓展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用于生成组件,可以简单理解为当在个人简历模板中遇到该组件企业名称行为标签的自概念元素时

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个。本篇文章就带你走近 .sync 的世界,谈言微中理解后会发现。其实也就那么着大连油是怎么回事。修饰符和指令不无关系,二把手从 指令 -> 修饰符 -> .sync 修饰符 稳中求进地来讲解 .sync 的含义及用法。

Vue项目使用CDN优化首屏加载

将引用的外部js,css文件夹怎么设置密码剥离开来,不编译到vendor.js中,而是用资源的形式引用。这一来冷却器可以使用多个线程异步将vendor.js。外部的js等加载下来,达到加速首开的目的。外部的库文件夹怎么设置密码,可以使用CDN资源,可能别的监视器资源等。

vue中is的作用和用法

ul里面嵌套li的写法是html语法的固定写法(还似乎table,select等)。my-component是我们自己写的组件。但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

vue引用js文件夹怎么设置密码的多种方式

vue引用js文件夹怎么设置密码的多种方式,这边认为引入jquery为例。js引入文件夹怎么设置密码方式包括: vue-cli webpack全局引入jquery,vue组件引用外部js的法门,单vue页面引用之中js法门

如何用vue制作一个探探滑动组件【转】

嗨,说起探探想必各位程序汪都不生疏(毕竟妹子很多),能在上面丝滑的翻牌子。探探的的堆叠滑动组件起到了关键的作用,二把手就来看看如何用vue写一个探探的堆叠组件

vue2.0/3.0在main.js引入scss文件夹怎么设置密码报错

在vue2.0的main.js中引入scss文件夹怎么设置密码报错原因是:在build共享文件夹怎么设置密码夹管理软件下的webpack.base.conf.js的rules里面添加配置。vue3.0写入.scss文件夹怎么设置密码在mian.js中 import ‘./styles/index.scss‘后出现下图报错攻歼法门:在vue.config.js文件夹怎么设置密码中添加以下代码生成

点击更多...

斟酌为目的,不存在任何商业策划文案目的。其版权属原作者所有,如有侵权或违宪,请与小编联系!情况属实人家将予以删除!

Baidu