[Vue] Watch 와 Computed 속성

 

Computed 속성

computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다

 

<div>{{ message.split('').reverse().join('') }}</div>

 

위 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. 

이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어진다.

따라서 아래와 같이 computed 속성을 활용한다.

 

 

<div id="app">
    {{ reversedMessage }}
</div>
 
<script>
var vm = new Vue({
    el: '#app',
    data: {
        message: '메세지!!'
    },
    computed : {
        reversedMessage : function(){
            return this.message.split('').reverse().join('');
        }
    }
});
</script>

 

해당 기능을 Methods 속성을 사용 할 수도 있지만 computed는 data 속성에 변화가 있을때 자동으로 다시 연산을 한다.

computed에서 사용하고 있는 data속성인 message라는 프로퍼티가 변화가 있을때만 다시 연산을하고 한번 연산한 값을 캐싱 해놓았다가 필요한 부분에 다시 재 사용한다.
같은 페이지내에서 같은 연산을 여러번 반복해야 할 경우에 성능면에서 효율적으로 사용할 수 있다.

반면 methods는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링된다.
캐싱 효과가 필요하다면 computed를 사용하고 캐싱이 필요없다면 methods를 사용.

 

---

 

Watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
computed 속성과 유사하지만 computed는 내장 api를 사용하는 간단한 연산정도에 적합하고
watch는 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

 

<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>
 
 
<script>
    var vm = new Vue({
        el: '#app',
        data : {
            message: '메세지!'
        },
        watch : {
            message : function(data){
                console.log('데이터가 갱신되었습니다 : ',data);
            }
        }
        
    });
</script>

 

---

 

Computed 와 Watch 구분

computed는 이미 정의된 계산식에 따라 결과값을 반환할 때 사용되며, 

watch는 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로서 사용할 수 있다

 

참조:

computed와 watch — Vue.js

Computed | Cracking Vue.js

[맨땅에VueJS]Computed VS Watch 언제써야할까?