[Vue2] Vue Watch 속성

Watch이란?

• 말 그대로 감시자 역할
• 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식의 명령형 프로그래밍

Watch의 특징?

• Vue에서 watch 속성을 사용하여 데이터 변경을 감지하고 반응 할 수 있으며,
  데이터 변경 결과에 따라 추가 반응 및 데이터 조작도 가능하다.
• API 엑세스(비동기 연산)을 수행하고 최종응답을 얻을 때 까지 중간 상태를 설정 할 수도 있다.
• 비동기식 이거나 시간이 많이 소요되는 작업을 수행하려고 하는 경우 watch를 유용하게 사용할 수 있다.

watch 속성의 기본 사용법

watch: {
       <감시 대상 데이터>: function(<새로운값>, <이전 값>){
            // 감시 대상 데이터가 변했을 때, 처리 로직       
} }

 

예제

 

HTML

<div id="app">
      {{ message }}<br />
      <button @click="changeMessage">Click</button><br />
      {{ updated }}
 </div>

 

JavaScript

 new Vue({
        el: "#app",
        data: {
          message : '헬로우',
          updated : '아니요'
        },
        // 컴포넌트 내부
        methods: {
          changeMessage() {
            this.message = '코지코더'
          }
        },
        computed: {
          // 계산된 getter
          reverseMessage() {
            // 'this'는 message를 가리킵니다.
            return this.message.split('').reverse().join('')
          }
        },
        watch: {
          message(newVal, oldVal) {
            console.log(newVal,oldVal);
            this.updated = '네';
          }
        }
      });

 

실행 결과

클릭 전

 

 

클릭 후

 

 

 

참고 자료

https://youtu.be/aMfVABEHyQk?list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh 

 

https://v2.ko.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js