computed, watch 차이

 

공통점

computed, watch 둘 다 Vue 인스턴스 내에 정의된 데이터 값에 대해 변경이 일어나는지 감시하고, 변경될 때 마다 함수가 재실행 된다.

 

 

computed -- 반응형 getter

 

computed에 정의한 함수는 함수이자 동시에 Vue 인스턴스 데이터가 된다.

copmuted에 정의해 사용하면 화면 여러군데에 사용해도 한번만 연산된다.

 

watch -- 반응형 callback

 

watch 역시 computed처럼 vue 인스턴스 데이터가 값이 변경되는지 감시하고, 변경되면 실행된다. 그러나

computed는 기존에 값을 기반으로 새로운 데이터 값을 위해 활용 된다면 watch는 정의된 데이터 값 하나만을 위해 사용된다. watch의 경우 데이터가 바뀌기전 까진 실행되지 않는다.

 

쉽게 말해서 watch는 초기에 할당된 값에 변화가 일어나야 실행된다.(특정 프로퍼티가 변경할때 콜백함수 실행) computed는 정의된 값을 바탕으로 새로운 값이 생겨난다. 새로운 데이터 값에서 참조하고 있는 기존데이터 값의 변경을 감지한다.

 

 

• 인스턴스의 data에 할당된 값들 사이의 종속관계를 자동으로 세팅하고자 할때는 computed로 구현하는것이 좋다. 
• watch는 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합하다.