[TIL] Vue - Computed(연산) Watch(감시자) 차이점

• watch 속성(감시자)은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식
• computed 속성(연산)은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식

일반적으로 methods 는 데이터 바인딩 이나 이벤트 바인딩 에 사용한다.

데이터 바인딩을 위해 메서드를 사용하는 경우(중괄호 사이에서 메서드를 사용해 템플릿에서 vue 인스턴스로 아웃소싱하는 경우), 메서드는 컴포넌트 리렌더리어 주기에 맞춰 매번 실행된다.
➡️ 변동 사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출하게 된다.
➡️ 이벤트 바인딩 시에는 method를 주로 사용하게 되는것

computed(연산)프로퍼티는 데이터 바인딩에만 쓰임
이벤트 바인딩엔 알맞지 않음
게다가 연산 프로퍼티는 다른 데이터를 기반하는 데이터를 가져오기에 유용하여 의존하는 데이터가 바뀔 경우에만 vue에 의해 재평가하거나 재실행 된다는 장점이 있음
즉, computed는 디펜덴시로 내부에 쓰인 데이터가 변경될 경우에만 재실행 (리엑트 useEffect와 유사한듯)

watch(감시자)는 템플릿에 직접 사용하지 않음
템플릿 내부에서 참조하지 않지만 computed를 포함해 어느 프로퍼티든 watch로 감시 가능!
게다가 데이터 변경에 대한 반응을 코드로 실행가능
예를 들어 http요청을 보내거나 타이머를 설정하거나 로컬스토리지에 데이터를 저장하는 작업 등이 있음
주로 데이터가 아닌 업데이트에 watch를 사용해야 함.
바뀌는 데이터를 토대로 데이터가 아니라 내부에서 업데이트 하는 작업이 있을 경우 사용

<div id="demo">{{ fullName }}</div>

• watch

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
    }
  }
})

• computed

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