屬性多層數(shù)組數(shù)據(jù)的添加修改

為什么需要使用Vue.set？

vue中不能檢測(cè)到數(shù)組的一些變化

比如一下兩種：

1、數(shù)組長(zhǎng)度的變化 vm.arr.length = 100　　

2、數(shù)組通過(guò)索引值修改內(nèi)容 vm.arr[1] = ‘aa’

那么為什么vue要做成這樣，不去監(jiān)聽(tīng)數(shù)組的變化，數(shù)組在日常中使用頻率還是比較高的，這個(gè)問(wèn)題其實(shí)尤大說(shuō)過(guò)，是為了性能，假設(shè)我們新建了一個(gè)數(shù)組，長(zhǎng)度是1000 但是只使用了前幾個(gè) ，去實(shí)現(xiàn)頁(yè)面的響應(yīng)式監(jiān)聽(tīng)，從數(shù)組改變到頁(yè)面輸出一共需要遍歷兩遍數(shù)組，會(huì)增加性能消耗，這可能就是不去監(jiān)聽(tīng)某一項(xiàng)數(shù)組數(shù)據(jù)變化的原因吧。

以下是vue observer的的源碼，判斷是數(shù)組了，會(huì)停止對(duì)數(shù)據(jù)屬性的監(jiān)測(cè)。

所以vue提供了Vue.set 方法彌補(bǔ)這些不足，Vue.set同vm.$set(target,key,value)：可以動(dòng)態(tài)的給數(shù)組、對(duì)象添加和修改數(shù)據(jù)，并更新視圖中數(shù)據(jù)的顯示。

vue在構(gòu)造函數(shù)new Vue()時(shí)，就通過(guò)Object.defineProperty中的getter和setter 這兩個(gè)方法，完成了對(duì)數(shù)據(jù)的綁定。

所以直接通過(guò)vm.arr[1] = ‘aa’的方法，無(wú)法修改值去觸發(fā)vue中視圖的更新，必須還得通過(guò)Object.defineProperty的方法去改變，而Vue.set（）就封裝了js底層的Object.defineProperty方法。

所以我們需要利用Vue.set() 響應(yīng)式新增與修改數(shù)據(jù)?！　?/p>

最近項(xiàng)目中使用到了樹(shù)形表格

即多層嵌套的數(shù)據(jù)，類似于這樣的頁(yè)面展示。

數(shù)據(jù)結(jié)構(gòu)如下：

obj:[
        {
          id:'1',
          type:'1',
          children:[
            {
              id:'1-1',
              type:'1-1',
            }
          ]
        }
      ]

在每一層數(shù)據(jù)的數(shù)據(jù)量都比較大的時(shí)候，不能使用一次性加載所有數(shù)據(jù)，需要優(yōu)化加載，點(diǎn)擊table的expand，即@expand-change方法獲取下一層數(shù)據(jù)，那么就需要給下一層數(shù)據(jù)增加children屬性

那么我們肯定會(huì)想到一下幾種方法：

• 第一種：

this.$set(this.obj[index],‘children',[…res.items])

• 第二種：

this.obj[index].children = []
this.obj[index].children.splice(0,0,…res.items) //或者push方法

• 第三種：

使用foreach方法，循環(huán)res.items使用 

this.$set(this.obj[index].children,index,res.items[index])

我使用了這幾種方法，甚至是組合使用了，但是結(jié)果不是很好，數(shù)據(jù)是增加上了，但是并沒(méi)有響應(yīng)式的增加上，頁(yè)面都沒(méi)有展示出相應(yīng)的數(shù)據(jù)，查看結(jié)構(gòu)時(shí)，發(fā)現(xiàn)到第三層的時(shí)候，增加的children已經(jīng)沒(méi)有{ob:Observer},ob_: Observer是vue這個(gè)框架對(duì)數(shù)據(jù)設(shè)置的監(jiān)控器,有這個(gè)屬性，才能監(jiān)聽(tīng)到數(shù)據(jù)的變化。

找了很久都不可以。最終嘗試了以下方法才得以解決：

//給第三層增加數(shù)據(jù)
this.$set(this.obj[level1Index].children[level2Index],'children',[])
//使用foreach 將數(shù)組的每一項(xiàng)添加為響應(yīng)式數(shù)據(jù)
res.items.forEach((item,index)=>{
	this.obj[level1Index].children[level2Index]
	this.$set(this.obj[level1Index].children[level2Index].children,index,item)
})

首先先添加children數(shù)組為響應(yīng)式，再去將數(shù)組中的每一項(xiàng)也添加為響應(yīng)式，頁(yè)面變可以正常顯示啦 。

向?qū)ο髷?shù)組中添加新屬性

this.rightMenuList.forEach(ele=>{
?? ??? ??? ??? ??? ?this.$set(ele, 'carInfo', data.carInfo)
?? ??? ??? ??? ?})

this.tableColums.forEach(res=>{
?? ??? ??? ??? ?this.$set(this.exportParams,res.id,"");
?? ??? ??? ?})

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論