場(chǎng)景：一個(gè)list列表的渲染

如圖

之前采取的是一把梭的形式，全部由一個(gè)接口去獲取所有的數(shù)據(jù)，由于后臺(tái)搭建數(shù)據(jù)庫(kù)的設(shè)計(jì)，到后期由于數(shù)據(jù)量比較龐大，后臺(tái)查詢(xún)的時(shí)候就會(huì)超時(shí)，然后我這邊就GG了。

優(yōu)化：后臺(tái)通過(guò)接口A只返回給我每個(gè)list元素的id，然后通過(guò)id去調(diào)用另外一個(gè)接口B去渲染剩下的數(shù)據(jù)。

第一次嘗試：由于項(xiàng)目是用vue寫(xiě)的，渲染的時(shí)候用的v-for，而且考慮到后臺(tái)做了分頁(yè)，我這邊直接把A接口返回的數(shù)組arr拿去渲染了，當(dāng)然最開(kāi)始最有一個(gè)id，通過(guò)遍歷arr拿到ID異步請(qǐng)求接口B獲取的其他數(shù)據(jù)直接通過(guò)obj.xxx = xxx的形式填充arr,發(fā)現(xiàn)頁(yè)面沒(méi)有渲染完成，查完資料才發(fā)現(xiàn)并沒(méi)有檢測(cè)到數(shù)組的更新，所以頁(yè)面不會(huì)重新渲染。

第二次嘗試：主要就是解決檢測(cè)數(shù)組更新的方法，哎呀? 我太懶了不想寫(xiě)了點(diǎn)擊這里

主要就是非變異方法的檢測(cè)，溜了溜了

example1.items.splice(indexOfItem, 1, newValue)就搞定了