티스토리 뷰

개발/Javascript

Vue 에서 배열 및 오브젝트의 변경 감지

종후 2020. 5. 2. 21:48

데이터가 변경되면 Vue는 해당 데이터가 변경된 것을 감지하여 화면을 다시 렌더링한다.

그런데 문제는 배열과 오브젝트에 대해서는 변경을 감지하지 못할 수도 있다.

 

일단 예를 하나 들어보겠다.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="updateArray">Click Me!</button>
    <p v-for="item in testArr">
    	<span>{{ item }}</span>
    </p>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            testArr: ['A', 'B', 'C', 'D', 'E']
        },
        methods: {
            updateArray () {
                this.testArr[4] = 'Z'
            }
        }
    })
</script>
</html>

버튼을 누르면 testArr 의 4번째 인덱스 값을 바꾸는 로직이다.

그런데 버튼을 눌러보면, 실제로 데이터는 로직대로 바뀌었지만 화면이 갱신되지 않는다.

(물론 $forceUpdate 로 화면을 강제로 갱신해버릴수는 있다.. )

 

 

Vue는 배열의 특정 메소드들을 래핑하여 해당 메소드의 호출이 있을때 변화를 감지하고 화면을 갱신한다.

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

위의 메소드들을 실행해보면, 화면 갱신이 자동으로 이루어 진다.

 

그렇다면 위에서 작성한 예제처럼 배열의 특정 인덱스의 값을 바꾸려면 어떻게 해야할까?

Vue에서 래핑되어있다는 위 7가지 메소드 만으로는 구현하기 번거롭다.

 

다행히도 배열과 오브젝트에 사용할 수 있는 Vue.set 과 Vue.delete 메소드가 제공된다. (혹은 this.$set, this.$delete)

이 두 메소드는 변경감지를 제공한다.

 

위 예제에서 this.testArr[4] = 'Z' 는 아래와 같이 사용할 수 있다.

updateArray () {
  // this.testArr[4] = 'Z'
  this.$set(this.testArr, 4, 'Z')
}

화면이 자동으로 잘 갱신될 것이다.

 

오브젝트도 마찬가지다.

특정 key에 값을 할당하거나 key를 삭제할 때는 아래와 같이 수행해야 한다.

this.$set(this.testObj, 'key', 'value')
this.$delete(this.testObj, 'key')

 

추가적으로

computed 에서 store 의 getter을 호출하는 로직이 있다면

store 가 set 이 일어났을때도 당연히 화면이 갱신된다. (watch 도 마찬가지겠지만)

저작자표시

'개발 > Javascript' 카테고리의 다른 글

Vue 의 화면 갱신은 비동기였다..  (0) 2020.08.15
Vue Test Utils 에서 mount 와 shallowMount 의 차이  (0) 2020.06.15
async function과 Promise  (0) 2020.04.26
javascript 의 Concurrency model 과 Event Loop  (0) 2020.02.01
callback function (콜백함수)를 Promise 로 변환  (2) 2019.12.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함