Vue.js에서 computed와 watch 비교 정리

computed와 watch는 Vue.js에서 데이터 변화에 반응하여 코드를 실행하는 데 사용되는 두 가지 유용한 기능입니다. 하지만, 각각 다른 목적과 특징을 가지고 있어 상황에 맞게 적절하게 사용해야 합니다.

 

1. 특징 비교

 

구분	computed	watch
목적	데이터 변화를 기반으로 새로운 값을 계산	데이터 변화 감지 및 반응
사용 방식	getter 함수 형식	옵션 객체 형식
실행 빈도	데이터 변화가 감지될 때마다 다시 계산	특정 조건 충족 시에만 실행
성능	watch보다 빠름	computed보다 느림
용도	변하지 않는 값 계산 (예: 이름 표시)	비즈니스 로직 수행, 특정 조건에 따른 작업 (예: API 호출)
선언 방식	computed 프로퍼티 사용	watch 옵션 사용

 

2. 사용 시점

• computed 사용 시점:
  • 변하지 않는 값을 기반으로 새로운 값을 계산해야 할 때
  • 데이터 변화에 따라 자주 업데이트되는 값을 표시해야 할 때
  • 성능이 중요한 상황에서
• watch 사용 시점:
  • 데이터 변화 감지 후 특정 조건에 따라 작업을 수행해야 할 때
  • 비즈니스 로직을 구현해야 할 때
  • 특정 변수가 변경될 때만 코드를 실행해야 할 때

3. 코드 예시

computed 예시:

HTML

`<template> <div> 이름: {{ fullName }} </div> </template>

<script> export default { computed: { fullName() { return this.firstName + ' ' + this.lastName; } }, data() { return { firstName: '김', lastName: '철수' } } } </script>`

 

watch 예시:

HTML

<template> <div> 카운터: {{ count }} </div> <button @click="increment">증가</button> </template><script> export default { watch: { count(newValue, oldValue) { if (newValue >= 10) { alert('카운터가 10 이상입니다!'); } } }, data() { return { count: 0 } }, methods: { increment() { this.count++; } } } </script>

 

5. 결론

computed와 watch는 Vue.js에서 데이터 변화에 반응하여 코드를 실행하는 데 유용한 기능이지만, 각각 다른 목적과 특징을 가지고 있습니다. 따라서, 상황에 맞게 적절하게 사용해야 효과적인 코드를 작성할 수 있습니다.