vue陣列物件修改觸發檢視更新

看風景就發表於2018-02-28
Vue陣列物件

直接修改陣列元素是無法觸發檢視更新的，如

this.array[0] = {
    name: 'meng',
    age: 22
}

修改array的length也無法觸發檢視更新，如

this.array.length = 2;

觸發檢視更新的方法有如下幾種

1. Vue.set

可以設定物件或陣列的值，通過key或陣列索引，可以觸發檢視更新

陣列修改

Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)

物件修改

Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)

2. Vue.delete

刪除物件或陣列中元素，通過key或陣列索引，可以觸發檢視更新

 

陣列修改

Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)

物件修改

Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)

3. 陣列物件直接修改屬性，可以觸發檢視更新

this.array[0].show = true;
this.array.forEach(function(item){
    item.show = true;
});

4. splice方法修改陣列，可以觸發檢視更新

this.array.splice(indexOfItem, 1, newElement)

5. 陣列整體修改，可以觸發檢視更新

var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;

6. 用Object.assign或lodash.assign可以為物件新增響應式屬性，可以觸發檢視更新

//Object.assign的單層的覆蓋前面的屬性，不會遞迴的合併屬性
this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign與Object.assign一樣
this.obj = _.assign({},this.obj,{a:1, b:2})

//merge會遞迴的合併屬性
this.obj = _.merge({},this.obj,{a:1, b:2})

7.Vue提供瞭如下的陣列的變異方法，可以觸發檢視更新

push()
pop()
shift()
unshift()
splice()  
sort()
reverse()

 

相關文章