computed와 watch

이전 단원에서는 data와 methods 의 대해 배웠다. 이번 단원에는 Vue의 다른 개념인 computed와 watch에 대해 공부했다.

 

쉽게 설명하자면 computed는 연산형 데이터? 라고 말 할 수 있을 것 같고 watch는 데이터가 바뀔 때 알 수 있으니 디버깅할 때 좋을 것 같다. 

 

computed는 데이터에 직접 연산을 넣으면 가독성이 떨어지고, 효율이 낮아질 수 있으니 따로 분리하는 것이라고 이해했고, watch는 그냥 디버깅 하위호환이라고 이해했다. 

---

computed (연산 프로퍼티)

: 연산 작업이 필요한 변수를 데이터처럼 관리하기 위함. 

➡️ 즉, 재사용성의 증가, 코드의 가독성 및 유지보수 작업이 향상된다. 

 

메서드와 다른 점: 다른 데이터에 의존하는 데이터에 주로 사용. 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다.

➡️ 메서드는 렌더링이 되었을 때 실행된다. 따라서 복잡한 계산이 있을 시에 성능이 저하된다. 반면 computed는 해당 종속 데이터가 변경되었을 때만 실행된다. 

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

 

watch (감시자)

: 데이터의 변경을 감지하기 위해 사용.

➡️데이터가 변경되었을 때 비동기 작업을 수행할 수 있다. ex)  API 호출 

 

데이터 프로퍼티를 업데이트 하지만 항상 업데이트 하면 안되는 로직을 실행하려는 경우 watch 를 사용한다. 

new Vue({
  el: '#app',
  data: {
    message: '',
    response: ''
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('message가 변경되었습니다:', newVal);
      // 비동기 작업 예시
      this.fetchResponse(newVal);
    }
  },
  methods: {
    fetchResponse: function(query) {
      // 예시 API 호출 (실제 API로 대체)
      setTimeout(() => {
        this.response = `Response for query: ${query}`;
      }, 1000);
    }
  }
});