Watch 다양한 형태와 쓰임

watch의 의미와 쓰임에 대해서는 알았지만, 여러가지 사용 형태에 대해서는 잘 몰랐다. 처음엔 행위를 catch해서 function만 수행하는 줄 알았다.

1. 함수function 실행

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

위 예제 형태처럼 해당 action을 catch해서 function을 변수로 갖는다.

2. methods 속성의 함수연결

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    logMessage() {
      console.log(this.message);
    }
  },
  watch: {
    'message': 'logMessage' // 대상 속성과 메서드 함수를 매칭
  }
})

(참고) 당연하겠지만 위 코드도 가능하다. methods에 method를 정의하고, 그 메서드 함수를 대상 속성과 매칭한다.

3. 핸들러와 초기실행 옵션

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    'message': {
      handler(value, oldValue) {
        console.log(value);
      },
      immediate: true // 컴포넌트가 생성되자마자 즉시 실행
    }
  }
})

(참고) watch 대상 속성에 위와 같이 handler()와 immediate속성을 정의할 수 있다.

참고한 사이트

• https://negabaro.github.io/archive/vuejs-watch
• https://kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1-vs-watch-%EC%86%8D%EC%84%B1
• https://joshua1988.github.io/vue-camp/syntax/watch.html#watch-%E1%84%89%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%AD%E1%86%BC-%E1%84%86%E1%85%AE%E1%86%AB%E1%84%87%E1%85%A5%E1%86%B8