Computed vs Watch

👩🏻‍💼 "computed랑 watch 둘 다 반응형이니까 똑같은 거 아니야?"
👼🏻 "아님"

Computed

• 반응형 getter

• 템플릿은 단순하고 선언적이여야 함!

  템플릿 내에 표현식을 넣으면 편리하지만, 너무 많은 연산은 템플릿을 복잡하고 유지 보수가 어렵게 만듦

• 만약 아래와 같은 중첩된 배열이 있는 객체에서, author 가 책을 냈는지 안냈는지에 따라 체크를 하고 싶다면 아래와 같이 나타낼 수 있음

<div id="computed-basics">
  <p>출판된 책:</p>
  <span>{{ author.books.length > 0 ? '있음' : '없음' }}</span>
</div>

Vue.createApp({
    data() {
        return {
          author: {
            name: '존 도우',
            books: [
              'Vue 2 - Advanced Guide',
              'Vue 3 - Basic Guide',
              'Vue 4 - The Mystery'
            ]
          }
        }
      }
})

• <span> 태그 내에 표현식을 넣으면서 지저분해짐
  • 만약 author.books 에 따라 한번 더 계산을 해야한다면 더 악화됨
• 반응형 데이터를 포함하는 로직인 경우, 아래와 같이 computed 속성을 사용해야 함

<div id="computed-basics">
  <p>출판된 책:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

Vue.createApp({
  data() {
    return {
      author: {
        name: '존 도우',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    publishedBooksMessage() {
      // 여기서의 `this` 는 vm 인스턴스이다.
      return this.author.books.length > 0 ? '있음' : '없음'
    }
  }
}).mount('#computed-basics')

• computed 속성 publishedBooksMessage 는 author.books 에 의존함.
  • books 값이 변경되면 publishedBooksMessage 에 의존하는 모든 바인딩을 업데이트함

Computed와 메소드 차이

👩🏻‍💼 "그냥 메소드에 똑같이 publishedBooksMessage() 만들면 되는거 아녀?"
👼 "결과는 같지만~~ 내부적으론 computed가 더 좋음~~ "

• author.books가 변경되지 않는다면, computed 속성에 대해 여러번 접근하더라도
  함수를 다시 실행할 필요 없이 이전에 계산된 결과를 즉시 반환함!
• 하지만 메소드에 선언한 함수는 재렌더링이 발생할 때마다 항상 함수를 실행하게 됨

• Computed로 Data를 업데이트할 수도 있음 : set
  • this.fullName = "도연 김" 을 실행하면, setter가 호출되고
    this.firstName과 this.lastName이 알아서 업데이트 됨!

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

watch

• 반응형 콜백

• 인스턴스의 특정 데이터가 변경될 때 지정한 콜백함수가 실행됨

• 주로 computed 속성이 더 많이 사용되지만, watch가 필요한 경우가 있음

  • 데이터 변경에 대한 응답으로 비동기 작업 (API 접근) or 비용이 많이 드는 작업을 수행할 때 사용

<div id="watch-example">
  <p>
    예/아니오 질문을 물어보세요.
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: '질문은 보통 물음표를 포합합니다. ;-)'
      }
    },
    watch: {
      // question 이 변경될 때마다, 이 함수가 실행될 것 입니다.
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = '생각중...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = '에러! API에 닿지 못했습니다. ' + error
          })
      }
    }
  }).mount('#watch-example')
</script>

• 사용자가 input 창에 값을 입력할 때마다, 그 값은 question에 바인딩 됨
  ▶ watch로 question을 감시하고 있기 때문에, 값이 변경될 때마다 체크하게 됨
  ▶ question이 물음표로 끝나면, methods에 정의된 getAnswer 호출
  ▶ axios를 사용해 api를 호출하고, 비동기로 값을 변경함

🥊 Computed vs Watch

• data에 할당된 값 사이에 종속관계를 자동으로 세팅하려면 computed

  • a 값에 따라 b 값이 결정된다면 computed
  • 왜? 🤔
    • 종속 관계가 복잡해진다면 watch로 구현할 경우 중복 계산이나 코드 복잡도가 높아짐

• 특정 데이터의 변경 시점에 특정 액션 (call api, push route ...) 을 취하고자 할 땐 watch

참고

🔗 Computed 속성 vs Watch 속성
🔗 watch와 computed 의 차이와 사용법