728x90
반응형
Watch
특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성
예제
// watch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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>
new Vue({
el: '#app',
data: {
num: 10
},
methods: {
addNum: function() {
this.num++;
},
logText: function() {
console.log('changed');
}
},
watch: {
<!-- data 속성 내 num 값 변화 시 수행할 함수 지정 -->
num: function() {
this.logText();
}
}
});
</script>
</body>
</html>결과 확인
Watch vs Computed
Watch는 주로 복잡한 로직이나 무거운 동작 즉, 네트워크나 데이터 요청 시 사용하고 Computed는 주로 단순한 로직 Validation이나 간단한 텍스트 연산에 사용된다. 공식문서에 따르면 Computed사용을 권장하고 Computed를 사용 할 때 소스코드가 간결해지며 내부적으로 캐싱처리도 잘 되어있다.
예제
// watch-vs-computed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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
},
// 단순한 로직
// Validation, 간단한 텍스트 연산
computed: {
doubleNum: function() {
return this.num * 2;
}
},
// 복잡한 로직
// 무거운 동작 즉, 네트워크나 데이터 요청에 적합
watch: {
num: function (newValue, oldValue) {
this.fetchuserByNumer(newValue);
}
},
methods: {
fetchuserByNumer: function (num) {
console.log(num);
}
}
});
</script>
</body>
</html>결과 확인
Computed 속성을 이용한 클래스 코드 작성 방법
예제
v-bind:class를 사용하여 텍스트 색 변경
// computed-usage.html
<!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>
</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>결과 확인
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 싱글 파일 컴포넌트 (0) | 2020.09.09 |
|---|---|
| [Vue.js] Vue CLI (0) | 2020.09.09 |
| [Vue.js] 템플릿 문법 - 기본 (0) | 2020.09.08 |
| [Vue.js] HTTP 통신 라이브러리 - axios (0) | 2020.09.08 |
| [Vue.js] 라우터 (0) | 2020.09.08 |
댓글