this.$set: 반응성 유지 위한 방법
Vue.js는 반응성 시스템을 통해 데이터의 변경을 감지하고 자동으로 화면을 업데이트 해줍니다. 객체의 속성을 변경하는 경우 Vue의 반응성이 정상 작동하지만, 특정 상황에서는 반응성이 제대로 작동하지 않을 수 있습니다. 이런 경우, `this.$set`을 사용하여 Vue에 변경 사항을 명시적으로 알려주어 반응성을 유지할 수 있습니다.
💁♂️ 객체의 속성을 변경은 아래 코드 처럼 간단히 값을 할당하면 됩니다.
<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'BEFORE',
};
},
methods: {
changeMessage() {
this.message = 'AFTER';
},
},
};
</script>this.$set을 사용하는 경우
1. 배열에 인덱스로 값을 추가할 때
Vue는 배열의 길이를 관찰할 수 있지만, 배열에 값을 추가할 때 일반적인 `인덱스로 할당`하면 반응성이 제대로 작동하지 않을 수 있습니다.
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
};
},
methods: {
addItem() {
// 일반적인 방식으로 배열에 값을 추가하면 반응성이 제대로 작동하지 않음
// this.items.push({ id: 3, name: 'Item 3' });
// this.$set을 사용하여 배열에 값을 추가함
this.$set(this.items, this.items.length, { id: 3, name: 'Item 3' });
},
},
};
2. 객체에 동적으로 속성을 추가할 때
Vue 인스턴스나 컴포넌트의 data 객체에 새로운 속성을 동적으로 추가하는 경우에도 this.$set을 사용해야 합니다. Vue는 인스턴스가 생성될 때 data 객체의 속성들만 반응성을 감지하기 때문에 동적으로 추가되는 속성은 반응성이 제대로 작동하지 않습니다.
export default {
data() {
return {
dynamicData: {
initialData: 'Initial Value',
},
};
},
methods: {
addDynamicData(newData, newValue) {
// 일반적인 방식으로 객체에 속성을 동적으로 추가하면 반응성이 제대로 작동하지 않음
// this.dynamicData.newData = NewValue;
// this.$set을 사용하여 객체에 동적으로 속성을 추가함
this.$set(this.dynamicData, newData, newValue);
},
},
};