$set / $delete

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

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

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

 

1. 배열

 this.$set(arr, index, value)

 

2. 객체

this.$set(obj, key, value)

this.$delete(obj, key)

 

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

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

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

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