computed는 기본적으로
읽기 전용
이다.
<template>
<button @click="changeMessage">Change</button>
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
},
computed: { // 읽기 전용
reversedMessage() {
return this.msg.split('').reverse().join('')
}
},
methods: {
changeMessage() {
this.reversedMessage = 'test'
}
}
}
</script>
버튼 클릭하면 아래와 같이 읽기 전용 이라고 경고가 뜨며 화면은 바뀌지 않는다.
[Vue warn]: Write operation failed: computed property "reversedMessage" is readonly.
computed
에 선언된 로직은 읽기 전용이며 캐싱
이 된다. (함수를 여러번 호출하여 메모리를 낭비하는 비효율을 막아줌)getter
와 setter
를 사용할 수 있다.함수로 호출하는 방식이 아닌
객체 리터럴로 선언해서 그 안에 get(), set()
함수를 선언해서 사용한다.버튼 클릭시 !dlrow olleH
에서 !!cba
로 수정이 된다.
<template>
<button @click="changeMessage">Change</button> <!-- 1. 클릭 -->
<div>{{ reversedMessage }}</div> <!-- 6. '!!cba' 출력 -->
<div>{{ reversedMessage }}</div> <!-- 6. '!!cba' 출력 -->
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!' // 4. 'abc!!'로 값 변경
}
},
computed: { // 읽기 전용
reversedMessage: { // !!!!!주의 : get,set을 사용할 때는 함수 호출 방식이 아닌 객체 리터럴로 작성
get() {
return this.msg.split('').reverse().join('') // 5. this.msg가 변경되었기 때문에 다시 계산하여 '!!cba'
},
set(newVal) {
this.msg = newVal // 3. 'abc!!' 값이 this.msg로 할당
}
}
},
methods: {
changeMessage() {
this.reversedMessage = 'abc!!' // 2. set() 으로 'abc!!' 할당
}
}
}
</script>