📌 computed()

• 미리 계산된 속성을 사용하여 함수가 불릴 때마다 매번 rendering을 하지 않기 때문에 불필요한 반복 연산을 줄일 수 있다.
• computed 속성은 의존된 반응형 데이터를 자동으로 추적한다.

computed VS method

• computed 속성은 의존된 반응형 데이터를 기반으로 cached(일시적으로 저장)된다.
• 의존하는 데이터가 변경된 경우에만 재평가됨으로 의존된 반응형 데이터가 변경되지 않는 한 이미 계산된 결과에 대한 여러 참조는 다시 평가할 필요가 없어 이전에 계산된 결과를 즉시 반환한다.
  그러나 method 호출은 렌더링이 발생할 때마다 함수를 실행한다.

• computed()를 사용한 restOfFoods를 여러번 호출한다.
• method를 사용한 getRestOfFoods()를 여러번 호출한다.
  
• computed()와 method의 함수
  
• 결과
• computed를 이용하면 계산된 결과가 캐싱되기 때문에 매번 함수를 부르지 않는다.
  

computed()는 언제 사용하는 게 적절할까?

• 동일한 의존성을 가진 여러 곳에서 사용할 때는 computed를 사용하여 계산 결과를 캐싱하여 중복으로 계산되는 것을 방지하는 것이 좋다.
• 그러나, 단순히 특정 동작을 수행하는 함수를 정의하는 경우 method를 사용해야한다. 이때 computed를 사용하면 쓸데없이 캐싱되어 메모리 공간을 차지하게 된다.

---

📌 watch()

• 감시하는 변수에 변화가 생겼을 때 주어진 일을 수행한다.
• 해당 데이터를 감시하며 변경되는 경우, 원하는 동작을 수행하기 위해 사용한다.
• 
• 감시하는 변수는 count고, count의 변화가 생길 때마다 콘솔이 실행되는 코드다.
  

• 결과
  

---

Computed VS Watchers

• 공통점 : computed와 Watchers 모두 데이터의 변화를 감지하여 처리한다.

• 차이점

  	Computed	Watchers
  동작	의존하는 데이터 속성의 계산된 값을 반환한다.	특정 데이터 속성의 변화를 감시하여 해당 감시 속성이 변화되면 작업을 수행한다.
  사용 목적	템플릿 내에서 사용되는 데이터를 연산할 때 사용한다.	데이터 변경에 따라 특정 작업 처리할 때 사용한다.
  사용 예시	필터링된 목록을 계산할 때 사용할 수 있다.	주로 비동기 API를 요청하거나 관련 데이터를 업데이트 할 때 사용한다.