watch
data ๋ณํ์ ๋ฐ๋ผ, ํน์ ๋ก์ง์ ์คํํ ์ ์๋ ์์ฑ.
โป computed์์ ์ฐจ์ด๊ฐ ๋ฌด์์ผ๊น?
computed๋ ๋จ์ ๊ฐ์ ๋ํ ๊ณ์ฐ์ด๋ validation ์ฒ๋ฆฌ. watch๋ ๋งค๋ฒ ์คํ๋๋ ๊ฒ์ด ๋ถ๋ด์ค๋ฌ์ด ์กฐ๊ธ ๋ ๋ฌด๊ฑฐ์ด ๋ก์ง์ ๊ตฌํ. ๋ฐ์ดํฐ ์์ฒญ(axios)์ ์ ํฉํ์ฌ methods ์์ฑ๊ณผ ๋ฌถ์ด ์ฌ์ฉํจ.
"๊ณต์๋ฌธ์์๋ watch๋ณด๋ค computed ์ฐ๊ธฐ๋ฅผ ๊ถ์ฅํจ"
<!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>
</head>
<body>
<div id="app">
{{ num }}
{{ doubleNum }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
//๊ธฐ์ค์ด ๋๋ ๊ฐ์ data์ num
//num์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๊ณ์ฐ๋์ด์ง
computed: {
doubleNum: function() {
return this.num * 2;
}
},
watch: {
num: function(newValue, oldValue) {
this.fetchUserByNumber(newValue);
}
},
methods: {
fetchUserByNumber: function(num) {
axios.get(num);
}
}
});
</script>
</body>
</html>