728x90
모든 예제 코드는 github에 있습니다.
9. 템플릿 문법 - 실전
watch
- 데이터를 바라보는 것으로 데이터가 변경될때마다 지정한 메소드가 실행된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Watch</title>
</head>
<body>
<div id="app">
<button v-on:click="addNum">increased</button>
<p>{{ num }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const mv = new Vue({
el: "#app",
data: {
num: 10,
},
watch: {
num: function () {
this.logText();
}
},
methods: {
addNum: function () {
this.num++;
},
logText: function () {
console.log('change');
}
},
});
</script>
</html>watch 속성 vs computed 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Watch Vs Computed</title>
</head>
<body>
<div id="app">
{{ num }}
<p>{{ doubleNum }}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = 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>
</html>computed는 Vue 내부적으로 계속 계산을 하며, 데이터 의존성이 있고 캐싱이 되고 빠르게 계산한다는 장점이 있다. 따라서 VeeValidate 내부적으로 이걸로 구현되어 있다. 단순히 Vaidation일때 많이 사용한다.
watch는 Num이 변경되었을때 특정 로직을 실행하는데, 실제로 무거운 로직(매번 실행되기 부담스러운)에 많이 사용한다.
새로바뀐 값을 메서드에 받고 데이터를 요청하는 것이 가장 괜찮은 요청 방법이 아닐까 생각한다.
watch보다 computed가 더 사용하는 것을 권장한다. 일단 watch는 코드가 장황해지고 computed의 장점인 캐싱이나 튜닝이 더 되어 있기 때문에 간단한 값들은 computed를 이용해 값을 조작하는 것을 추천한다.
직접 watch를 사용해 get을 하는 것을 해보자.
computed 속성을 이용한 클래스 코드 작성 방법
- 데이터 바인딩을 할때 데이터 자체를 넣을 수도 잇지만, 조건을 줘서, 조건에 맞게 데이터를 다르게 데이터 바인딩을 할 수 있다.
<p v-bind:class="{warning : isError}">Hello</p>- 위와 같이 줄 수 잇지만, 이렇게 하는 것 보다 computed를 사용하는 것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Computed Usage</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{warning : isError}">Hello</p>
<p v-bind:class="errorTextColor">Hello</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
isError: false,
},
computed: {
errorTextColor: function () {
return this.isError ? "warning" : null;
},
},
});
</script>
</html>728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 11. 싱글 파일 컴포넌트 (0) | 2020.07.05 |
|---|---|
| 10. 프로젝트 생성 도구 - CLI (0) | 2020.07.05 |
| 8. 템플릿 문법 (0) | 2020.07.05 |
| 7. HTTP 통신 라이브러리 - axios (0) | 2020.07.05 |
| 6. 라우터 (0) | 2020.07.05 |
