[Vue.js] watch와 computed
2021. 9. 26. 15:55ㆍ개발공부/Vue.js 시작하기
728x90
watch와 computed
데이터의 변화에 따라서 특정 로직을 실행할 수 있는 라이브러리 입니다.
<div id="app">
<button v-on:click="addNum">increase</button>
<p>{{ num }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
watch: {
num: function() {
this.logText();
}
},
methods: {
addNum: function() {
this.num++;
},
logText: function() {
console.log('changed');
}
}
});
</script>watch와 computed의 차이
가벼운 validate 같은 로직은 computed를, 매번 돌리기 무거운 로직은 watch를 주로 씁니다. 데이터 요청과 같은 경우 watch와 methods를 사용할 수 있다는 말이죠.
참고로 공식문서에서는 웬만하면 computed를 사용하는 것을 추천합니다.
computed 사용예시
computed로 warning 속성을 추가해주는 방법은 아래 코드와 같습니다. 삼항연산자를 사용해 깔끔하게 나타냈습니다.
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<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() {
return this.isError ? 'warning' : null;
}
}
});
</script>참고자료
'개발공부 > Vue.js 시작하기' 카테고리의 다른 글
| [Vue.js] Vue CLI (0) | 2021.09.26 |
|---|---|
| [Vue.js] 모르는 문법 나왔을 때 공부방법 (0) | 2021.09.26 |
| [Vue.js] 템플릿 문법 (0) | 2021.09.26 |
| [Vue.js] axios (비동기식 처리) (0) | 2021.09.23 |
| [Vue.js] Router (0) | 2021.09.20 |