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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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版本实现代码
2012/09/15 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
移动端界面的适配
2017/01/11 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python 画函数曲线示例
2019/12/04 Python
python语言的优势是什么
2020/06/17 Python
python让函数不返回结果的方法
2020/06/22 Python
常用的10个Python实用小技巧
2020/08/10 Python
python爬取招聘要求等信息实例
2020/11/20 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
代理班主任的自我评价
2014/02/04 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
药店收银员岗位职责
2015/04/07 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书