Vue Computed & Watch
Vue에서 데이터를 다루는 Options에 대해 알아봅시다
🔵 Computed
Vue 인스턴스에 추가되는 계산된 속성
- 코드의 간단화를 위해서 꼭 필요 ( 유지보수 쉽게 하려고! )
- data를 이용해 만드는 속성 값 (함수의 형태지만 제 2의 data 속성이라고 생각하자.)
- 계산된 값이 하나의 속성처럼 사용되기 때문에 반드시 return이 필요하다.
<div id="example">
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: '안녕하세요'
},
computed: {
// 계산된 getter
reversedMessage: function () {
// `this` 는 vm 인스턴스를 가리킵니다.
return this.message.split('').reverse().join('')
}
}
})원본메시지: 안녕하세요
역순으로 표시한 메시지: 요세하녕안console.log(vm.reversedMessage) // => '요세하녕안'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'vm.reversedMessage의 값은 항상vm.message의 값에 의존합니다.
물론 메서드 함수를 사용해서 기능을 만들 수 있다.
<p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}- 그러나 이렇게 할 경우, 렌더링할 때 마다 함수를 계속 실행해야해서 굉장히 아쉽다.
⭐computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것
-> 종속대상이 변경되지 않으면 기존에 계산해놓은 값을 그대로 가져오기 떄문에, 굉장히 합리적으로 자원을 활용할 수 있어요!!
🔵 Watch
data가 변경되는 것을 감시하는 속성
- 감시하는 대상이 변경되면 자동으로 호출된다.
- 특정한 데이터의 변화에 따라서 다른 데이터 혹은 환경 등을 변화시켜야 하는 경우에 주로 사용한다.
- return이 불필요하다.
- 감시하는 대상이 변화함에 따라 함수의
첫번째 인자로 새로운 값그리고두 번째인자로 이전값이 넘어온다.
<body>
<div id="app">
<button @click="numberA++"> A+</button>
<button @click="numberB++"> B+</button>
<p>computed A: {{ computedNumberA }}</p>
<p>method B: {{ methodNumberB() }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue.js"></script>
</body>const app = new Vue({
el: '#app',
data: {
numberA: 0,
numberB: 0,
constant: 100,
},
computed: {
computedNumberA() {
console.log('computedNumberA 호출!')
return this.numberA + this.constant
}
},
methods: {
methodNumberB() {
console.log('methodNumberA 호출!')
return this.numberB + this.constant
}
},
watch: {
numberA(newVal, oldVal) {
console.log(`watched: ${oldval} => ${newVal}`)
}
}
})🔵 computed vs watch
watch는 Vue 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 속성watch는 데이터가 바뀌면 함수 실행해! 라는명령형 프로그래밍 방식computed는 계산해야 하는 목표 데이터를 정의하는선언형 프로그래밍 방식
<div id="demo">{{ fullName }}</div>- watch 사용
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})- computed사용
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})-> 일반적으로 선언형 프로그래밍 방식이 코드 반복이 적어 우수한 경향을 보입니다
기록하는 습관은 쉽게 무너지지 않아요.