引言

在前端項(xiàng)目開發(fā)過程中，el-table展示的結(jié)果列使用組件形式引入，其中某些字段通過:formatter方法轉(zhuǎn)碼，結(jié)果欄位的字段顯示/隱藏控制也使用組件形式引入，前端在控制字段顯示屬性時(shí)，發(fā)現(xiàn)碼值轉(zhuǎn)換及字段信息展示均有問題。

問題分析

通過閱讀代碼結(jié)構(gòu)，發(fā)現(xiàn)el-table-column通過template循環(huán)生成，由于template的作用是模板占位符，可幫助我們包裹元素，但在循環(huán)過程當(dāng)中，template不會被渲染到頁面上。有關(guān)表格數(shù)據(jù)渲染中key的作用如下：

• key作為一個(gè)DOM節(jié)點(diǎn)的標(biāo)識值，結(jié)合Diff算法可以實(shí)現(xiàn)對節(jié)點(diǎn)的復(fù)用。(key相同的節(jié)點(diǎn)會被復(fù)用)；
• 只有當(dāng)key(或其他導(dǎo)致isSameNode判斷為false)發(fā)生改變時(shí)，才會觸發(fā)節(jié)點(diǎn)的重新渲染。否則Vue將會復(fù)用之前的節(jié)點(diǎn)，通過改變節(jié)點(diǎn)的屬性來實(shí)現(xiàn)節(jié)點(diǎn)的更新。

同時(shí)，template標(biāo)簽不支持:key屬性，

注意： vue實(shí)例綁定的元素內(nèi)部的template標(biāo)簽不支持v-show指令，即v-show="false"對template標(biāo)簽來說不起作用。但是此時(shí)的template標(biāo)簽支持v-if、v-else-if、v-else、v-for這些指令。

解決方法

既然template標(biāo)簽不支持key屬性，可通過在el-table-column標(biāo)簽加入:key="Math.random()"屬性，這個(gè)key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時(shí)辨識 VNodes，依次來提升頁面渲染性能。如果不更新這個(gè)key的話,顯示/隱藏列的時(shí)候,部分DOM不會重新渲染,導(dǎo)致table變化時(shí)候內(nèi)容錯(cuò)亂。

拓展閱讀

一、key的作用

前文已經(jīng)講到，作為一個(gè)DOM節(jié)點(diǎn)的標(biāo)識值，結(jié)合Diff算法可實(shí)現(xiàn)對節(jié)點(diǎn)的復(fù)用。(key相同的節(jié)點(diǎn)會被復(fù)用。)

只有當(dāng)key(或其他導(dǎo)致isSameNode判斷為false)發(fā)生改變時(shí)，才會觸發(fā)節(jié)點(diǎn)的重新渲染。否則Vue將會復(fù)用之前的節(jié)點(diǎn)，通過改變節(jié)點(diǎn)的屬性來實(shí)現(xiàn)節(jié)點(diǎn)的更新。那么，key使用id與index的區(qū)別又是什么呢？

二、key使用id與index的區(qū)別

不推薦使用index作為key，因?yàn)檫@種做法會導(dǎo)致某些節(jié)點(diǎn)被錯(cuò)誤地原地復(fù)用，具體如下：

• 性能損耗：列表渲染時(shí)會導(dǎo)致變動項(xiàng)往后的所有列表節(jié)點(diǎn)(內(nèi)容)的更新（相當(dāng)于key沒發(fā)揮作用）。
• 出現(xiàn)錯(cuò)誤：某些節(jié)點(diǎn)在錯(cuò)誤的位置被復(fù)用。(例如當(dāng)列表項(xiàng)中使用到復(fù)選框時(shí))

性能損耗

列表渲染時(shí)會導(dǎo)致變動項(xiàng)往后的所有列表節(jié)點(diǎn)(內(nèi)容)的更新（相當(dāng)于key沒發(fā)揮作用）

需要注意的是，變動項(xiàng)往后的所有列表節(jié)點(diǎn)的更新本質(zhì)是節(jié)點(diǎn)屬性的更新，節(jié)點(diǎn)本身會被復(fù)用。

<!-- 測試代碼 -->
<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()	// 刪除首項(xiàng)
  或
  2. this.unShiftArr()	// 在首部插入新項(xiàng)
  */
 }, 1000)
 },
 methods: {
 shiftArr(){
  this.arr.shift();
 },
 unshiftArr(){
  this.arr.unshift({id: -1, data: -1});
 }
 }
}
</script>

上邊的例子很簡單，就是v-for渲染一個(gè)長度為10000的列表，然后在Vue mounted 1s后，執(zhí)行一個(gè)刪除列表首項(xiàng)或在列表頭插入新項(xiàng)，觀察兩種key綁定的具體頁面更新開銷。

頁面開銷使用chrome的performance選項(xiàng)卡來測算

刪除列表首項(xiàng)

列表頭 unshift 新元素

出現(xiàn)錯(cuò)誤

某些節(jié)點(diǎn)在錯(cuò)誤的位置被復(fù)用。(例如當(dāng)列表項(xiàng)中使用到復(fù)選框時(shí))

<!-- 測試代碼 -->
<template>
 <div>
 <button @click="test">刪除列表第一項(xiàng)</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>

總結(jié)

到此這篇關(guān)于Vue頁面渲染中key的應(yīng)用的文章就介紹到這了,更多相關(guān)Vue頁面渲染key的應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論