직역은 계산된. 이라는 뜻인데..
<script>
export default {
data(){
return {
fruits : [
'Apple', 'Banana', 'Cherry'
]
}
},
computed:{
hasFruit(){
return this.fruits.length > 2
}
},
methods:{
add(){
this.msg2 += '!'
}
}
}
</script>
메소드랑 차이점은,
computed는 캐싱을 하는데,
메소드는 랜더링 될 때마다 계산하는 반면 computed는 계산에 필요한 값이 바뀔 때에만 계산함.
참고로, 이건 메소드 쓰듯 하면 안됨.
computed는 더 정확히 말하면 저거 계산되고 데이터로써 남아있는 거임.
그래서 호출할 때도, method 처럼 괄호 붙여서 쓰는 게 아니라
<h1>{{ reverseMessage }}</h1>
걍 일케 씀.
그리고 원래 이거 get만 되는건데,
https://tofusand-dev.tistory.com/44
Vue.js (3) - Computed :: Getter & Setter의 정의
Computed computed 프로퍼티는 methods와 비슷하지만, 아주 강력한 힘을 가지고 있습니다. Computed는 캐싱(cache)을 가지고있다는 것입니다. 그래서 캐싱이 뭔가요? 캐시(cache)는 잠시 저장해 둔다는 의미를
tofusand-dev.tistory.com
이렇게 getter setter 정의하면 set도 할 수 있다고 함.
'Vue.js' 카테고리의 다른 글
| 클래스 바인딩, 템플릿 내의 조건문. (0) | 2023.10.04 |
|---|---|
| watch 데이터가 변경되는 지 관찰 (0) | 2023.10.04 |
| computed 템플릿 내에서 간단한 연산 (0) | 2023.09.27 |
| data(), v-bind (0) | 2023.09.27 |
| v-html, html요소를 다른 태그 안에다 data() 변수로 추가하기 (0) | 2023.09.27 |