Vue set Vue3

Vue.set, Vue.delete

• Vue2에서는 객체 혹은 배열의 데이터가 변경되면 화면에서 값의 변화를 감지하지 못했음
• 따라서 Vue.set 혹은 this.$set 등을 이용해 데이터를 변경 / 추가해야 화면에 반영됨
  • Ex) arr 배열의 2번째 인덱스 값을 10으로 바꾸는 경우 : Vue.set(arr, 2, 10)
• 데이터를 삭제할 때도 Vue.delete 혹은 this.$delete등을 이용해야 함

Vue3에서는?

• Vue2에서는 데이터의 변경할때 Javascript의 Object.defineProperty를 사용했음
• 이것 때문에 데이터의 변경이 화면의 변경으로 이어지지 않음
• Vue3에서는 ES6의 proxy 기능을 활용했기 때문에, 데이터 변경이 바로 화면에 반영되게 됨
• arr[2] = 10; 처럼 작성해도 문제 없음

References

1. https://mine-it-record.tistory.com/395
2. https://blog.woolta.com/categories/10/posts/140
3. https://stackoverflow.com/questions/69780482/how-do-i-do-vue-set-in-vue-3