[VUE] Watch Computed 차이점

Watch Computed 차이점

봐도 봐도 나는 차이점을 명확하게 모르겠어서
한 번 정리해보려고 한다.

👉아래의 글들을 정리하면서 최종 결론낸 것은

보통의 경우에는 computed가 좋다.
하지만 최종 응답, 그러니깐 엔터가 쳐진 순간이라고 보면 이해가 될 것인데
답을 적을 때까지 중간 상태를 설정할 수 있기 때문에 그 경우에는 watch가 좋다!

 

name : nac
작성을 기다리고 있습니다
name : nacho + 입력 > 끝

 

🤔흠
velog에서 작성 중에 임시저장이 계속 되는 것도 watch가 아닐까?
글을 적다가 중간 중간 저장중이라는 것이 나오는데,
계속 내가 글을 쓰는지 지켜보고 있고, 키보드를 두드리지 않을 때 감지해서 임시저장을 해주는데 이럴 때 watch를 사용하는 것 같다!

 

🌞혹시 제가 생각한 차이점이 틀리다면 댓글로 알려주세요🌞

🔷 챗 GTP 답변

Computed (계산된 속성):

Computed 속성은 데이터와 데이터에 기반한 파생된 값을 계산하는 데 사용되는 Vue.js와 같은 프레임워크의 기능입니다.
Computed 속성은 일종의 함수이며, 데이터 속성을 기반으로 계산된 값을 캐시하고, 데이터가 변경될 때만 다시 계산됩니다.
계산된 속성은 템플릿에서 데이터 속성처럼 사용할 수 있으며, 데이터 변경 시 자동으로 업데이트됩니다.
주로 복잡한 계산 또는 여러 데이터 속성을 기반으로 값을 계산할 때 사용됩니다.

 

🔶 VUE.JS 공식 홈페이지

너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵고,
복잡한 로직이라면 반드시 computed 속성을 사용해야 한다.
일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딩 할 수 있습니다
computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다
computed 속성 대신 메소드와 같은 함수를 정의할 수도 있습니다. 최종 결과에 대해 두 가지 접근 방식은 서로 동일합니다. 차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것
computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다.
즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환
메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행
싱을 원하지 않는 경우 메소드를 사용

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

이렇게 되어 있는데, 다시 보니깐 computed는 이해가 간다.
값이 변경되지 않는 이상, 함수를 실행하지 않는다!

 

🟪watch vs computed

watch : 명령형 프로그래밍
computed : 선언형 프로그래밍

computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있습니다. 그래서 Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.
우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. 계산된 속성은 이러한 기능을 수행할 수 없습니다.