Vue.js에서 computed와 watch는 둘 다 반응형 데이터를 다루는 방법을 제공하지만, 그 목적과 사용 방식에 따라 차이가 존재해요.
그 차이에 대해 알아봅시다!
1. Computed
Computed는 계산된 속성(Computed property)을 정의하는 데 목적을 두고 있어요.
어떤 데이터의 변화에 따라 다른 데이터를 자동으로 갱신해야 할 때, 사용합니다.
이 속성은 종속된 데이터가 변경되지 않는 한 캐시됩니다.
캐싱(Caching) : 데이터 or 연산 결과를 일시적으로 저장하여, 나중에 동일한 데이터를 요청할 때, 다시 계산하거나 가져오는 대신 저장된 데이터를 빠르게 제공하는 기술
따라서 종속 데이터가 변경되지 않으면, 동일한 결과를 반환하며 성능 최적화에 유리합니다.
computed.html
<!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 }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 10,
},
computed: {
doubleNum: function () {
return this.num * 2;
},
},
});
</script>
</body>
</html>
결과
2. Watch
Watch는 데이터의 변화를 감지하고 특정 로직을 실행하는 데 목적을 두고 있어요.
특정 데이터가 변경될 때, 비동기 작업 or 복잡한 로직을 실행해야 할 때, 사용됩니다.
이 속성은 AJAX 호출, 타이머 설정 등 데이터 변경에 대한 반응으로 비동기 작업을 실행할 수 있습니다.
특정 데이터의 변화를 감지하고, 이에 따라 동작을 정의할 수 있습니다.
<!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 }}</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 (newValue, oldValue) {
this.fetchUserByNumber(newValue);
},
},
methods: {
fetchUserByNumber: function (num) {
// console.log(num);
axios.get(num);
},
},
});
</script>
</body>
</html>
3. 정리하며
지금까지의 내용을 정리하자면,
computed는 다른 데이터에 의존하여, 계산된 값을 생성하고 캐싱 기능을 제공합니다.
watch는 특정 데이터의 변화를 감지하여, 그에 따라 비동기 작업 or 추가 로직을 실행할 때, 사용됩니다.
Vue.js 공식 문서에 의하면, watch는 명령형 프로그래밍 방식, computed는 선언형 프로그래밍 방식이기에 코드의 가독성을 위해 computed 속성을 권장한다고 하네요!
참고
'Front-End Study > Vue.js' 카테고리의 다른 글
| Vuex (0) | 2024.07.09 |
|---|---|
| Vue.js에서의 ES6 (0) | 2024.07.08 |
| Props와 Events (0) | 2024.07.04 |
| 전역 컴포넌트와 지역 컴포넌트의 차이 (0) | 2024.07.02 |
| MVVM 패턴 (0) | 2024.07.02 |