티스토리 뷰
데이터가 변경되면 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
- vue.js
- event loop
- 프로미스
- javascript
- intellij
- 자바스크립트 엔진
- Builder
- KCD
- 이벤트루프
- nuxt
- await
- vue
- 모듈시스템
- javascript engine
- es6
- vuejs
- 스프링부트
- 자바스크립트
- promise
- nuxtjs
- 빌더패턴
- KCD2019
- 인텔리제이
- 야누자이
- springboot
- 근본
- jest
- 테스트코드
- CommonJs
- 근본설
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함