Vue页面渲染中key的应用实例教程


Posted in Vue.js onJanuary 12, 2021

引言

在前端项目开发过程中,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选项卡来测算

删除列表首项

Vue页面渲染中key的应用实例教程

列表头 unshift 新元素

Vue页面渲染中key的应用实例教程

出现错误

某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)

<!-- 测试代码 -->
<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.js 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
php正则校验用户名介绍
2008/07/19 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
公司年会策划方案
2014/05/17 职场文书
人力资源管理求职信
2014/08/07 职场文书
亲属关系公证书样本
2015/01/23 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2016新党章学习心得体会
2016/01/15 职场文书