VueJS - 13. Computed VS Watch

아래 글을 따라하며 VueJS에 적응하기

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90vuejs-computed-vs-watch-%EC%96%B8%EC%A0%9C%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C-d25316c4ef42

[맨땅에VueJS]Computed VS Watch 언제써야할까?

 

요약

<computed는 이미 정의된 계산식에 따라 결과값을 반환할 때 사용되며, watch는 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로서 사용할 수 있다>

 

computed: {

calculated: function () {

if(this.count === 2) {

alert('값이 2가 되었습니다.')

}

}

}

 

 - HTML에서 {{ calculated }}로 실행을 해주어야 한다.

 

watch: {

count: function (newVal) {

if(newVal === 0) {

alert('값이 0이 되었습니다.')

this.count = 3

}

}

}

 

<button @click="count --">카운트 감소</button>

- 특정 조건(클릭 시 count--)에서 트리거로서 사용할 수 있다.

 

- 실제 실행 화면