-
[Vue.js] 기본 문법, watch와 computed 비교Front-End/Vue.js 2022. 11. 14. 09:17
📑 watch 란?
계산된 속성인 computed와 비슷한 역할을 하는 것이 있다. 바로 watch이다. VueJS 공식 문서에 이 둘을 비교한 세션을 따로 정리할 정도로 이 둘은 하는 역할이 비슷하다. 어떻게 사용하느냐에 따라 watch가 computed의 역할까지도 할 수 있다.
watch는 말 그대로 특정 대상을 보고 있는 감시자의 역할을 한다고 보면 될 것 같다. 바로 예제로 한 번 살펴보자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{count}}</h1><br> <p>{{text}}</p> <button @click="count --">카운트 감소</button> </div> <script> new Vue({ el : "#app", data :{ count :3, text : "변경 전" }, watch :{ count:function(newVal, oldVal){ this.text = oldVal + '에서' + newVal +'로 변경되었습니다.' } } }) </script> </body> </html>
기본적으로 @click 디렉티브를 사용해서 count가 1씩 감소하는 application 이고 JS 코드를 보면 watch가 있는 것을 볼 수 있다.
watch: {
count: function (newVal, oldVal) {
this.text = oldVal + '에서 ' + newVal + '로 변경되었습니다.'
}
}data에 선언되어 있는 count가 watch에서 사용중인 것도 확인이 가능하다. 이렇게 watch는 기존 vue 인스턴스 내에 선언된 값의 변화를 감시하는 역할을 하기 때문에 vue 인스턴스 내에 선언된 값을 그대로 다시 사용하게 된다. 즉, 예에서는 count를 감시하여 count의 값이 변화할 때마다 watch안에 정의한 count라는 함수가 실행되는 것이다.
text는 초기에 설정한 "변경전"이 출력되며 만약 count function이 실행되면 this.text로 값을 바꾼다.
📑 watch , computed 차이는?
watch와 computed는 비슷해 보이지만 그 차이가 있다. watch가 꼭 필요한 경우만 사용한느 것이 좋은데, 참조하고 있는 값이 변경될 때마다 정의된 계산식에 따라 값을 출력하는 computed와 다르게 watch는 값이 변경될 때 실행되는 함수를 우리가 지정할 수 있다.
📌 즉) computed가 계산된 값을 출력하는 용이라면, watch는 어떤 조건이 되었을 때 함수를 실행시키기 위한 트리거로 사용할 수 있다.
맨처음 예제와 비슷하지만 count 함수의 로직을 보면 if문으로 조건을 주어 특정 값에 도달했을 때 alert 창이 나타나도록 하였다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{count}}</h1><br> <p>{{text}}</p> <button @click="count --">카운트 감소</button> </div> <script> new Vue({ el : "#app", data :{ count :3, text : "변경 전" }, watch :{ count:function(newVal){ if(newVal ==0){ alert('값이 0이 되었습니다.') this.count =3 } } } }) </script> </body> </html>
만약 computed에 똑같은 로직을 작성했다면 아무일도 일어나지 않을 것이다. 따라서 다시 정리해보면
📌 computed : 이미 정의된 계산식에 따라 결과값을 반환할 때 사용
📌 watch : 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로 사용
반응형'Front-End > Vue.js' 카테고리의 다른 글
[Vue.js] npm 방식 vue 기본 문법 (on:click, v-html, v-for, 데이터바인딩 ,,) (0) 2022.11.22 [Vue] Vue.js npm 방식으로 설치하기 , VSCode 프로젝트 생성 (0) 2022.11.21 [Vue.js] 양방향 데이터 바인딩 v-model (0) 2022.11.13 [Vue.js] 계산된 속성 computed vs methods (0) 2022.11.13 [Vue.js] 기본 문법 (v-on 이벤트리스너) (0) 2022.11.13