increase 버튼을 누를때마다
watch
의 console.log('changed')
가 실행된다
<div id="app">
{{ num }}
<button v-on:click="addNum">increase</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = 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 watch
는 computed
가 적합하다.
computed
는 벨리데이션(확인), 간편한 텍스트 연산에 적합하고
watch
는 무거운 동작(비동기 data요청 등)에 더 적합한 방법이다.
watch 속성과 computed 속성 차이점에 관한 공식 문서 링크
<div id="app">
{{ num }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
computed: {
doubleNum: function() {
return this.num * 2;
}
},
watch: {
// 데이터의 변화에 따라서 특정 로직을 실행
num: function(newValue, oldValue) {
this.fetchUserByNumber(newValue);
}
},
methods: {
fetchUserByNumber: function(num) {
// console.log(num);
axios.get(num);
}
}
});
</script>
computed
에 조건문을 적용하고 <p>
태그의 class에 v-bind 적용
<style>
.warning {
color: red;
}
</style>
<div id="app">
<p v-bind:class="errorTextColor">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
// cname: 'blue-text',
isError: false
},
computed: {
errorTextColor: function() {
// if (isError) {
// return 'warning'
// } else {
// return null;
// }
// 삼항연산자
// (위 주석과 같은 코드로 isError가 true이면 warning을, false일땐 null을 반환)
return this.isError ? 'warning' : null;
}
}
});
</script>