computed
- computed는 데이터 값에 변경이 일어나는지 감시한다.
- firstName과 lastName 값 중 하나라도 변경되면 fullName 함수가 자동으로 실행됨.
- 인스턴스의 data에 할당된 값들 사이의 종속관계를 자동으로 세팅하고자 할때는 computed로 구현하는것이 좋다.
// /views/computed
<template>
<h1>Full Name : {{ fullName }}</h1>
</template>
<script>
export default {
data() {
return {
firstName: "KyungJoon",
lastName: "Park",
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
};
</script>
watch
- computed의 경우 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용이 된다면, watch는 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용.
- watch는 computed와 달리 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다.
- watch는 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합하다.
// /views/watch2
<template>
<div>
<h1>Full Name : {{ fullName }}</h1>
<button type="button" @click="changeName">변경</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Kyungjoon",
lastName: "Park",
fullName: "",
};
},
watch: {
firstName: function (firstName, oldFirstName) {
this.fullName = firstName + " " + this.lastName;
},
lastName() {
this.fullName = this.firstName + " " + this.lastName;
},
},
methods: {
changeName() {
this.firstName = "Kyong";
},
},
};
</script>