반응형
computed
보통 value에 대한 validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="errorTextColor">Hello</p>
<p v-bind:class="{warning:isError}">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isError: false
},
computed: {
errorTextColor: function() {
return this.isError ? 'warning' : null;
}
}
});
</script>
</body>
</html>
data의 isError값에 따라 <p>태그에 warning클래스 여부가 변경됨.
<p v-bind:class="{warning:isError}">Hello</p>
isError값이 true일 경우 warning 표시.
watch
computed보다 상대적으로 무거운 로직.
Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<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
},
watch: {
num: function(newValue, oldValue) {
this.fetchUserByNumber(newValue);
}
},
methods: {
fetchUserByNumber: function(num) {
console.log(num);
}
}
});
</script>
</body>
</html>
위의 예제를 보면 num라는 프로퍼티가 변경될때 마다 fetchUserByNumber라는
method가 실행 되는걸 확인 할 수 있음.
특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합해보임.
* 만약 computed로 구현가능한 것이라면 watch가 아니라 computed로 구현하는것이 보통의 경우 적합해보이고
또한, vue공식문서에 보면 watch의 사용보다 computed의 사용을 권장함.
https://kr.vuejs.org/v2/guide/computed.html
computed와 watch — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
반응형
'Front > Vue' 카테고리의 다른 글
| Spring + Vue.js 세팅(2) (0) | 2020.03.09 |
|---|---|
| Spring + Vue.js 세팅(1) (0) | 2020.02.11 |