Vue页面渲染中key的应用实例教程
引言
在前端项目开发过程中，el-table展示的结果列使用组件形式引入，其中某些字段通过:formatter方法转码，结果栏位的字段显示/隐藏控制也使用组件形式引入，前端在控制字段显示属性时，发现码值转换及字段信息展示均有问题。
问题分析
通过阅读代码结构，发现el-table-column通过template循环生成，由于template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上。有关表格数据渲染中key的作用如下：
- key作为一个DOM节点的标识值，结合Diff算法可以实现对节点的复用。(key相同的节点会被复用)；
- 只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
同时，template标签不支持:key属性，
注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。
解决方法
既然template标签不支持key属性，可通过在el-table-column标签加入:key="Math.random()"属性，这个key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，依次来提升页面渲染性能。如果不更新这个key的话,显示/隐藏列的时候,部分DOM不会重新渲染,导致table变化时候内容错乱。
拓展阅读
一、key的作用
前文已经讲到，作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。那么，key使用id与index的区别又是什么呢？
二、key使用id与index的区别
不推荐使用index作为key，因为这种做法会导致某些节点被错误地原地复用，具体如下：
- 性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）。
- 出现错误：某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
性能损耗
列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）
需要注意的是，变动项往后的所有列表节点的更新本质是节点属性的更新，节点本身会被复用。
<!-- 测试代码 -->
<template>
<div>
<div v-for="(item, index) in arr" :key="index 或 item.id">
{{item.data}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
arr: Array.from({length: 10000}, (v, i) => {return {id: i, data: i}})
}
},
mounted(){
setTimeout(()=>{
/*
1. this.shiftArr() // 删除首项
或
2. this.unShiftArr() // 在首部插入新项
*/
}, 1000)
},
methods: {
shiftArr(){
this.arr.shift();
},
unshiftArr(){
this.arr.unshift({id: -1, data: -1});
}
}
}
</script>
上边的例子很简单，就是v-for渲染一个长度为10000的列表，然后在Vue mounted 1s后，执行一个删除列表首项或在列表头插入新项，观察两种key绑定的具体页面更新开销。
页面开销使用chrome的performance选项卡来测算
删除列表首项
列表头 unshift 新元素
出现错误
某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
<!-- 测试代码 -->
<template>
<div>
<button @click="test">删除列表第一项</button>
<div v-for="(item, index) in arr" :key="index 或 item.id">
<input type="checkbox" />
{{item.data}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
arr: Array.from({length: 5}, (v, i) => {return {id: i, data: i}})
}
},
methods: {
test(){
this.arr.shift();
}
}
}
</script>
总结
到此这篇关于Vue页面渲染中key的应用的文章就介绍到这了,更多相关Vue页面渲染key的应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
浅谈vue异步数据影响页面渲染
今天遇到一个问题,要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错. 因此我希望能在所有请求都得到后再去做页面的渲染. 1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染 2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染
-
解决vue页面渲染但dom没渲染的操作
我就废话不多说了,大家还是直接看代码吧~ this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ language: "zh-CN" }); }); 补充知识:vue+Echarts动态数据已经赋值,但是无法渲染页面的问题 最近用vue+Echarts想做一个饼状统计图,但是数据明明已经绑定完毕,但是页面渲染一直没有效果,最终才发现问题所在,自己还是个新手,主要对vue还不是很熟悉.
-
Vue在页面数据渲染完成之后的调用方法
在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度.之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现. nextTick:在下次 DOM 更新循环结束之后执行延迟回调. watch:用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调. 之前我是这样子使用nex
-
写给vue新手们的vue渲染页面教程
前言 本文主要给各位vue的新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. vue渲染页面 路径图 index.html App.vue router.js main.js 效果图: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持.
-
vue.js,ajax渲染页面的实例
关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode.这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了.起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难.让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗.是不难啊,可是为什么我心里天然觉得很难呢? CNode是给了我们数据接口,ajax也就那
-
Vue页面渲染中key的应用实例教程
引言 在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码值转换及字段信息展示均有问题. 问题分析 通过阅读代码结构,发现el-table-column通过template循环生成,由于template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上.有关表格数据渲染中key的作用如下: key作为一个DOM节点
-
vue 页面加载进度条组件实例
页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计.另外,我们不可能监控到所有资源的加载情况. 事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的.所以没我们需要去"模拟"
-
vue页面离开后执行函数的实例
如下所示: destroyed: function () { console.log("我已经离开了!"); this.doSomething(); }, 说明:destroyed是与methods.mounted同层级的 以上这篇vue页面离开后执行函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue页面跳转后返回原页面初始位置方法 vue中页面跳转拦截器的实现方法 Vue指令的钩子函数使用方法
-
JSP页面文件中base标记用法实例分析
本文实例分析了JSP页面文件中base标记用法.分享给大家供大家参考,具体如下: 我们在用IDE工具生成JSP页面时通常都包含下面的两段代码, <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %
-
用v-html解决Vue.js渲染中html标签不被解析的问题
前言 最近在工作中遇到一个问题,在网页中后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来. 问题如下所示: 解决方法: Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了. 代码改动如下: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家都 学习或者工作能带来一定的帮助,如果有疑问大家
-
Android App中使用ListFragment的实例教程
ListFragment继承于Fragment.因此它具有Fragment的特性,能够作为activity中的一部分,目的也是为了使页面设计更加灵活. 相比Fragment,ListFragment的内容是以列表(list)的形式显示的.ListFragment的布局默认包含一个ListView.因此,在ListFragment对应的布局文件中,必须指定一个 android:id 为 "@android:id/list" 的ListView控件! ListFragment基础使用 下面
-
Oracle中正则表达式的使用实例教程
前言 正则表达式已经在很多软件中得到广泛的应用,包括*nix(Linux, Unix等),HP等操作系统,PHP,C#,Java等开发环境. 本文主要介绍了关于Oracle中正则表达式的使用方法,下面话不多说了,来一起看看详细的介绍. Oracle使用正则表达式离不开这4个函数:regexp_like.regexp_substr.regexp_instr.regexp_replace. regexp_like 该函数只能用于条件表达式,和 like 类似,但是使用的正则表达式进行匹配 //查询所
-
Python中zip()函数用法实例教程
本文实例讲述了Python中zip()函数的定义及用法,相信对于Python初学者有一定的借鉴价值.详情如下: 一.定义: zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple(元组),然后返回由这些tuples组成的list(列表).若传入参数的长度不等,则返回list的长度和参数中长度最短的对象相同.利用*号操作符,可以将list unzip(解压). 二.用法示例: 读者看看下面的例子,
-
Python中函数的用法实例教程
本文以数值计算为例讲述了Python中函数的用法,分享给大家供大家参考借鉴之用.具体如下: 我们都知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73.1 s1 = 3.14 * r1 * r1 s2 = 3.14 * r2 * r2 s3 = 3.14 * r3 * r3 当代码出现有规律的重复的时候,你就需要当心了,每次写3.14 * x * x不仅很麻烦