이번에는 watch 속성에 대해서 공부해보았습니다.
<!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">
{{ 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
},
watch: {
num: function() {
this.logText();
}
},
methods: {
addNum: function() {
this.num = this.num + 1;
},
logText: function() {
console.log('changed');
}
}
})
</script>
</body>
</html>
본문 내용은 increase라는 버튼을 누르게되면 addNum() 이라는 함수를 실행하도록 되어있습니다.
그리고 우리는 {{ num }} 문법을 통해서 즉각적으로 변화되는 num의 데이터를 화면으로 확인 할 수 있게 되구요.
여기서 Vue 인스턴스에 watch라는 속성을 추가했습니다.
내용을 살펴보자면 watch 내부의 num : function() 부분은 data: 내부에 설정된 num이 변경이 감지되면 즉각 함수를 실행하게 됩니다.
즉 위는 상황상 사용자가 increase 버튼을 누르게되면 addNum함수가 실행되면서 num의 값이 1증가하게 되고 num의 변화를 watch가 감지했다면 logText() 함수를 실행하게 됩니다.
바로 테스트 해보겠습니다.
increase 버튼을 총 5번 클릭하였고 num의 값은 10에서 15로 증가하였습니다. 클릭마다 1씩 증가하라는 명령이었으니 증가하면서 감지된 변화로 logText함수가 실행되어 changed라는 내용이 콘솔창에 찍혔습니다ㅣ. 위처럼 나온다면 큰 문제없이 작동중이라는 뜻으로 생각하셔도 좋을것같네요 ㅎㅎ
그런데 watch와 비슷한 역할을 하는 속성이 또 있습니다.
원래 Computed라는 속성인데요 원래 이전에 공부를 했던 내용이라 여기서 딱히 설명하지는 않겠지만 굉장히 비슷한 역할을 하고 있습니다.
그래서 한번 확인해보고 어떤걸 어떤 상황에서 사용해야 하는지도 알아보겠습니다.
<!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">
{{ num }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
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);
},
}
})
</script>
</body>
</html>딱히 트리거가 존재하지는 않습니다 그냥 개발자 콘솔에서 확인해보려고 합니다 ㅎㅎ
Computed 속성에 doubleNum이 있고 doubleNum은 data속성에 num속성에 2를 곱한 값을 리턴하도록 되어있습니다.
watch 속성은 num이 변할 때마다 fetchUserByNumber() 메소드를 실행해 콘솔에 갱신된 값을 표시하도록 되어있습니다.
이제 서버를 실행시켜 화면을 띄우고 개발자 콘솔을 열어 vue 탭으로 이동해보겠습니다.
저는 아래 이미지와 같이 보이도록 설정했습니다.
이미지 우측에 보시면 data 하위에 num이 10, computed 하위에 doubleNum이 20으로 코드에 작성된 내용 그대로 보이고 있습니다.
위 빨간 네모박스에 있는 플러스 버튼을 눌러서 num의 값을 1 증가시켜 보겠습니다.
num이 1 증가해서 11이 되었고 computed 하위에 doubleNum이 변환된 num의 값(11)에 2를 곱해 22가 되었고 콘솔에도 watch가 주시하고 있던 num의 변화에 의해 fetchUserByNumber() 메소드가 실행되서 갱신된 num의 값을 보여주었습니다.
이렇게 봤을땐 watch와 computed 속성은 유사한 동작을 하는것 같아 보입니다.
현업에 종사하시는 분의 말에 의하면 watch는 실제로 매번 실행되기 무거운 로직들에 많이 사용된다고 합니다. 반대로 computed 속성은 단순하고 가벼운 연산에 사용된다고 하구요.
현재 공식문에서는 찾아볼 수 없지만 과거버전 공식문서에는 watch보다는 computed를 사용하는게 더 좋다고는 표현이 되어 있긴 하네요.
watch를 살펴보면서 computed 속성과 비교까지 보았는데 사실 아직은 좀 헷갈리긴 하지만 계속 복습해서 확실히 이해를 하고 넘어가야겠습니다 ㅎㅎ
읽어주셔서 감사합니다:)
'Dev > Vue' 카테고리의 다른 글
| Vue - computed로 클래스 조작 (0) | 2022.05.31 |
|---|---|
| Vue - v-on (0) | 2022.05.13 |
| Vue - 엑시오스(axios) (0) | 2022.04.25 |
| Vue - 라우터 링크[router-link] (0) | 2022.04.13 |