[VueJS] $set()/$delete() - 객체, 배열 데이터 변경 및 삭제 감지 요청

vueJS의 가장 큰 특징은 양방향 바인딩이라 생각된다.

 

하지만 그 양방향 바인딩의 특징이 VueJS를 사용하면서 객체 데이터나 배열 데이터를 사용하게 되면 새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다.

 

여기서 "값이 갱신되었다." 라고 요청을 하는 메서드인 Vue.set / $set 와 Vue.delete / $delete 가 존재한다.

 

▷ 구문

배열 : Vue.set(arr, index, value) // == this.$set(arr, index, value)
객체 : Vue.set(obj, key, value) // ==this.$set(obj, key, value)
         Vue.delete(obj, key) // == this.$delete(obj, key)

 

이제 예제를 통해 알아보자.

 

▷ 예제1) 데이터 변경 감지 요청 - $set, $delete

new Vue({
    el: '#app',
    data: {
        obj : {a : 'a'},
        arr : [0, 1, 2]
    },
    methods : {
        changeData : function(){
		// 배열의 값 변경
		// this.$set(arr, index, value)
		Vue.set(this.arr, 2, 3);

		// 객체의 값 변경 및 추가
		// this.$set(obj, key, value)
		Vue.set(this.obj, 'it', 'record');
        },
        removeProperty : function(){
		// 객체의 속성 제거
		// this.$delete(obj, key)
		Vue.delete(this.obj, 'a');
        }
    }
});

 

Vue.set() 혹은 this.$set() 을 통해 배열이나 객체의 값이 갱신되었다 라고 요청하는 것이며

Vue.delete() 혹은 this.$delete() 를 통해 객체의 속성이 제거되었다 라고 요청하는 것이다.