res = ?[ { "program_id": 6, "code": 1005,"create_time": 1627022366,?
?? ??? ??? ?"child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]

問題

利用遞歸進(jìn)行格式化，在computed中執(zhí)行，第一次顯示沒有問題，但切換頁(yè)面后，時(shí)間顯示變成一行NaN

formatProjectList (list) {
? let projectList = list.map((item) => {
? // formatTime是格式化函數(shù)，返回'Y-m-d H:i:s'格式的字符串
? ? ? item.create_time = formatTime(new Date( item.create_time * 1000 ), 'Y-m-d H:i:s')
? ? ? if (item.child) { this.formatProjectList (item.child) }
? ? ? return item
? ? })
? ? return projectList
? },

原因

在map函數(shù)中，item.create_time 直接修改了源數(shù)據(jù)res，res是已格式完成的字符串

切換頁(yè)面會(huì)重新觸發(fā)computed，此時(shí)再執(zhí)行格式化會(huì)將字符串傳給formatTime格式化函數(shù)，formatTime接收了字符串會(huì)返回NaN

解決方案

將源數(shù)據(jù)res進(jìn)行深拷貝，再執(zhí)行該函數(shù)

computed: {
? projectList () {
?? ? ?// deepClone 是深拷貝函數(shù)
? ? ? let newList = deepClone(res.data.list)
? ? ? let formatList = this.formatProjectList(newList)
? ? ? return formatList
? ? }
? }

數(shù)字運(yùn)算有時(shí)候會(huì)出現(xiàn)NAN的情況

vue的html中，經(jīng)常會(huì)出現(xiàn)，需要對(duì)獲取的數(shù)據(jù)進(jìn)行加減乘除運(yùn)算的情況，如果在表達(dá)式中進(jìn)行運(yùn)算

例：{{ a + b + c }}

這種會(huì)導(dǎo)致，你在獲取數(shù)據(jù)的時(shí)候，值還沒取到，dom剛開始渲染，所以a，b，c的值做運(yùn)算，會(huì)顯示NAN，等到數(shù)據(jù)獲取結(jié)束，才會(huì)顯示運(yùn)算結(jié)果，對(duì)于這種短暫的NAN的閃現(xiàn)，往往會(huì)影響用戶體驗(yàn)