<watch>
- 데이터의 변화에 따라 특정 로직을 수행하는 속성
- ex) 예시 num의 변화에 따라 log를 찍는 로직을 수행
<script>
new Vue({
el: '#app',
data: {
num: 10
},
watch: {
num: function() {
this.logText();
}
},
methods: {
addNum: function() {
this.num = this.num + 1;
},
logText: function() {
console.log('changed');
}
}
})
</script>
<computed vs method>
- 캐싱 차이 : computed는 종속 대상을 따라 저장(캐싱) 된다. 해당 속성이 종속된 대상이 변경될 때만 함수를 실행. 즉 {{message}}의 경우 message가 변경되지 않는 한 computed 속성은 여러번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환.
- 이에 반해 method를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다.
<computed vs watch>
- computed : 계산해야 하는 목표 데이터를 정의하는 방식으로 '선언형 프로그래밍' 방식.validation, text, 연산에 적합
- watch : 감시할 데이터를 지정하고 그 데이터가 바뀌면 함수를 실행하라는 방식의 '명령형 프로그래밍' 방식. 데이터 요청에 적합 (무거운 작업)
'vue.js' 카테고리의 다른 글
싱글파일 컴포넌트 (0) | 2023.04.20 |
---|---|
Vue CLI(command line interface) (0) | 2023.04.20 |
템플릿 문법 (0) | 2023.04.20 |
액시오스(Axios) (0) | 2023.04.20 |
뷰 라우터 (0) | 2023.04.19 |