vue2 watch와 computed의 차이점

vue를 배우기 시작했을 무렵 watch와 computed의 역할에 대해서 감이 잡히지 않았다.

watch.. 단어 그대로 감시하고 있다는 점이 더 직관적이라 computed 더 쉽게 사용할 수 있는 걸 watch로만 개발하기도 했다. (졸라 혼남) 아무튼 지금은 어느정도 감이 잡혔지만 명확하게 설명할 수 있지는 않았기에 watch 와 computed의 차이점에 대해 정리할 필요가 있었다.

 

watch와 computed의 차이점

watch와 computed는 둘 다 상태 변화를 감지하고 그에 따른 행동을 수행하는 데 사용되는 옵션이다.

그러나 각각의 목적과 동작 방식에는 몇 가지 차이가 있다.

 

watch

watch 옵션은 데이터의 변화를 감지하고, 특정 데이터가 변경될 때 특정 동작을 수행할 수 있게 한다.

 

watch: {
    myData(newValue, oldValue) {
        // 데이터가 변경될 때 실행되는 로직
        console.log('myData가 변경되었습니다.', newValue, oldValue);
    }
}

 

computed

computed 옵션은 의존하는 데이터의 변화를 감지하고, 자동으로 계산된 값을 반환한다.

캐싱되어 있기 때문에 의존 데이터가 변경될 때만 계산이 수행되어 성능을 향상시킬 수 있다.

 

computed: {
    sum() {
        // value1 또는 value2가 변경될 때만 계산이 수행됨
        return this.value1 + this.value2;
    }
}

 

computed 속성은 마치 데이터 속성처럼 사용되지만, 함수로 정의된다.

그리고 의존하는 데이터에 대한 참조가 있는 경우에만 다시 계산된다.

 

차이점

watch는 특정 데이터의 변경을 감지하고 그에 따라 로직을 실행한다.

computed는 의존 데이터의 변경을 자동으로 감지하고 그에 따라 계산된 값을 반환하며, 주로 도출된 값이 필요한 경우에 사용한다.

 

watch에서는 데이터의 이전 값 및 현재 값에 대한 정보를 제공하는데, 이는 비교를 통해 특정 동작을 수행하는 데 활용될 수 있다. computed는 계산된 속성이므로 템플릿에서 마치 데이터 속성처럼 사용할 수 있다.

이는 코드의 가독성을 높이고 템플릿에서 불필요한 로직을 피할 수 있게 해준다.

 

일반적으로, 데이터의 변화를 감지하여 특정 동작을 수행해야 할 경우에는 watch,

계산된 값을 사용해야 하는 경우에는 computed를 사용하자