오늘은 Vue.JS step 6. watch vs computed 에 대해 포스팅 하려고 합니다.
Vue.JS에서 watch와 computed는 비슷하지만 각각의 역할에 의해 구분이 되기 때문에
함께 비교하며 보도록 하겠습니다.
먼저 watch는 단어의 연관된 의미로 "감시자" 라고 볼 수 있습니다.
특정 대상을 지켜보며 변화를 감시하고 변화에 따라 watch에서 정의한 함수들이 동작하게 됩니다.
정의된 함수를 실행하기 위한 트리거 라고도 볼 수 있습니다.
또한 watch는 기본적으로 변경된 값의 newValue 인자와
변경되기 전의 값인 oldValue 인자를 변수값으로 가지고 있습니다.
그리고 computed는 단어의 연관된 의미로 "계산기" 라고 볼 수 있습니다.
기존의 정의된 값을 연산하여 결과 값을 정의합니다.
특징으로는 인자를 전달할 수 없으며, 이미 정의된 계산식에 반드시 결과값을 반환(return)해야 합니다.
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
watch_vs_computed.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
vue 인스턴스 안에 data, watch, computed 속성을 정의합니다.
data 속성에는 input으로 값을 받을 수 있는 num값과
값의 변화에 따라 연산하여 결과 값을 보여줄 addValue, twiceValue, fourtimesValue를 정의하였습니다.
watch 속성에는 num 값이 변화할때마다 function 함수가 실행되어 console.log 및
computed function들을 정의하였습니다.
computed 속성에는 num값의 변화에 따라 값을 연산하여 addValue, twiceValue, fourtimesValue값이
반환되도록 정의하였습니다.
<!-- watch_vs_computed.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<label>num : </label><input type="number" v-model.number="num">
</br><label>addValue : </label>{{addValue}}
</br><label>twiceValue : </label>{{twiceValue}}
</br><label>fourtimesValue : </label>{{fourtimesValue}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'bono915.tistory.com 환영합니다.',
num:0,
addValue:0,
twiceValue:0,
fourtimesValue:0
},
watch:{
num:function(newValue, oldValue){
console.log("oldValue : " + oldValue);
console.log("newValue : " + newValue);
console.log("");
this.add;
this.twice;
this.fourtimes;
}
},
computed:{
add: function(){
return this.addValue = this.num + 1;
},
twice: function(){
return this.twiceValue = this.num * 2;
},
fourtimes: function(){
return this.fourtimesValue = this.num * 4;
}
}
})
</script>
</body>
</html>
Visual Studio Code에서 watch_vs_computed.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
아래 그림과 같이 input창에 숫자를 변경할 때마다 watch가 변화를 감지하여
computed에 정의된 3개의 함수를 실행하고, 최종적으로 addValue, twiceValue, fourtimesValue값을
연산하여 결과를 보여주는 것을 확인할 수 있습니다.
개발자 도구에서 Vue 탭을 통해 변화하는 data 값과 computed 연산값
Console에서 watch가 감지하는 내용들을 함께 확인할 수 있습니다.
지금까지 Vue.JS step 6. watch vs computed에 대한 포스팅이였습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어 (0) | 2022.05.17 |
|---|---|
| [Vue.JS] step 7. props 데이터 전달(부모 -> 자식) (2) | 2022.05.16 |
| [Vue.JS] step 5. 메서드(methods) (0) | 2022.05.10 |
| [Vue.JS] step 4. 데이터 바인딩(data binding) (0) | 2022.05.04 |
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
