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

為什么需要使用Vue.set？

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

比如一下兩種：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 第一種：

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ù)是增加上了，但是并沒有響應(yīng)式的增加上，頁面都沒有展示出相應(yīng)的數(shù)據(jù)，查看結(jié)構(gòu)時，發(fā)現(xiàn)到第三層的時候，增加的children已經(jīng)沒有{ob:Observer},ob_: Observer是vue這個框架對數(shù)據(jù)設(shè)置的監(jiān)控器,有這個屬性，才能監(jiān)聽到數(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)式，頁面變可以正常顯示啦 。

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

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

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

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

最新評論