[Vue] Computed vs Watch

vue 에는 인스터스 내의 정의된 데이터 값이 변경되는지 감시하고 변경이 될 때마다 정의된 함수가 실행된다

computed

• 선언형, 기본 getter 함수
• data 들을 구독하며 구독하고 있는 값이 변경됨을 감지하여 계산하고 출력
• 지켜야 할 문법
  • return 값
  • template에서 호출 시 괄호 x

export default{
    name : "test",
      data(){
        return{
              message : "안 녕 하 세 요"
      }
    },
      computed: {
        replaceWhiteSpaceMessage(){
               return this.message.replaceAll(" ", "");
       }
    }
}

watch

• 명령형
• computed 와 같이 특정한 데이터 구독, 구독하고 있는 data가 업데이트 될 때에 등록한 함수가 콜백 홤수로 실행
• 업데이트 된 값이 첫번째 인수, 업데이트 전 값이 두번째 인수
• 어떠한 추가적인 로직이 필요할때 사용

export default{
    name : "test",
      data(){
        return{
              message : "안 녕 하 세 요"
      }
    },
      watch: {
        message(val){
               this.checkMessage();
       }
    },
      methods : {
          // message 가 변경되었을 때 실행 시킬 함수
          checkMessage(){
            ...
        }
    }
}