728x90
Vue에서 데이터가 변할 때마다 실행 되는 Watch 속성
- 데이터의 변화를 감지하여 메서드가 실행되도록 할 수 있습니다.
- 이 watch 속성을 사용하면 React의 useEffect처럼 특정 데이터가 변할 떄마다 어떤 행동을 하도록 만들 수 있습니다.
- 아래 예제를 보면 num이 변할 때마다 this.logText()라는 메서드를 실행하게 됩니다.
- 이런 방식은 아래 react useEffect() 훅과 비슷한 효과를 볼 수 있겠습니다.
<!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">
<span>{{num}}</span>
<button v-on:click="addNum">increase</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/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>
// 실행은 안시켜봤는데 위 코드와 아래코드가 같은 코드인것 같습니다. num이 변할 때마다 useEffect 안의 logText()가 실행,
// 단 하나 다른점은 아래 코드에서는 mount되는 시점에 logText가 한번 실행 되겠네요.
import { useEffect, useState } from 'react';
function CompareWatchAndUseEffect () {
const [num, setNum] = useState(0);
const addNum = () => setNum(prev=> prev + 1)
const logText = () => console.log('changed');
useEffect(() => {
logText();
}, [num]);
return (
<div>
<span>{num}</span>
<button onClick={addNum}>increase</button>
</div>
)
}'FrontEnd > Vue 2' 카테고리의 다른 글
| [Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기 (0) | 2022.09.18 |
|---|---|
| [Vue.js] vue cli와 이전 방식 비교 (0) | 2022.09.18 |
| [Vue.js] Computed 속성을 활용한 CSS Class 바인딩 (0) | 2022.09.18 |
| [Vue.js] Watch 속성 vs Computed 속성 (0) | 2022.09.18 |
| [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding (0) | 2022.09.18 |
| [Vue.js] 데이터 바인딩, 디렉티브 (0) | 2022.09.18 |
| [Vue.js] Axios 라이브러리 (0) | 2022.09.18 |
| [Vue.js] Router 기초 (0) | 2022.09.16 |
댓글