背景：業(yè)務(wù)中涉及一個(gè)Vue頁面磕洪，該頁面有大量的表單數(shù)據(jù)，一次請(qǐng)求需要等待20幾秒，現(xiàn)在對(duì)該頁面進(jìn)行優(yōu)化，點(diǎn)擊某個(gè)表單加載相應(yīng)的數(shù)據(jù)因俐，以此來降低頁面響應(yīng)時(shí)間棍潘，將其控制在3S左右。
首先悦穿，接口毫秒級(jí)一次返回所有數(shù)據(jù)的集合，那么對(duì)返回的數(shù)據(jù)進(jìn)行按需加載處理，將處理的數(shù)據(jù)放到新的數(shù)組中去渲染頁面即可達(dá)到按需加載歹嘹。由于JavaScript的限制，在使用索引對(duì)數(shù)組進(jìn)行賦值時(shí)孔庭，Vue不會(huì)重新渲染頁面尺上。
原因：
在Vue里面材蛛，其核心雙向綁定的實(shí)現(xiàn)，是通過Object.defineProperty()（在Vue3中使用了proxy）來劫持對(duì)象的怎抛，但Object.defineProperty()無法劫持?jǐn)?shù)組成員的變化
列如：
arr[3] = newValue;
數(shù)組arr本身沒有變化.
解決方案：利用splice 卑吭，該方法會(huì)改變數(shù)組本身。為什么該方法可以修改數(shù)組后觸發(fā)頁面響應(yīng)式更新呢马绝？答：vue重寫了這些方法豆赏，具體怎么寫的大家可以去看源碼vue/src/core/observer/array.js
splice的使用如下：
arrayObject.splice(
// index: 必需，整數(shù)富稻，添加/刪除項(xiàng)目的位置掷邦，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置
index,
// howmany: 添加/刪除元素的個(gè)數(shù)
howmany,
// item1,......,itemx: 待添加元素
item1,.....,
itemX
)
列子：
this.formTemplate.splice(val, 1, this.formTemplateAll[val]);
