1. Computed 란?
- computed는 script 태그에서 사용할 수 있는 속성 중 하나다.
- computed에 등록된 어떤 변수나 조건, 메소드 등은 계속해서 감시 및 추적된다.
- computed를 통해 특정 값을 감시하고, 해당 값의 변화에 따라 웹 페이지 또는 컴포넌트가 알맞게 반응하도록 설정할 수 있다.
- computed는 기존의 어떤 데이터 값을 후처리하여 사용하고 싶을 때 이용하는 기능이다.
2. 예제코드 및 경로
a) 파일 경로
b) App.vue
<template>
<section>
<h1>Fruits</h1>
<ul>
<li
v-for="fruit in fruits"
:key="fruit">
{{ fruit }}
</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: [
'Apple', 'Banana', 'Cherry'
]
}
}
}
</script>
<style lang="scss">
</style>
c) Fruits.vue
<template>
<section v-if="hasFruit">
<h1>Fruits</h1>
<ul>
<li
v-for="fruit in fruits"
:key="fruit">
{{ fruit }}
</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: [
'Apple', 'Banana', 'Cherry'
]
}
},
computed: {
hasFruit() {
return this.fruits.length > 0
}
}
}
</script>
<style lang="scss">
h1, li {
font-size: 50px;
}
</style>
d) 코드 해설
- computed라는 속성값을 통해서 hasFruit() 메소드를 등록한다.
- section 태그에서 v-if를 사용하여 조건에 hasFruit()를 명시한다.
- data에 등록되어 있는 fruits 배열에 값의 존재여부에 따라 출력을 할것인지 말것인지를 결정하게 된다.
3. 차이점
- computed를 사용했을 때와 사용하지 않았을 때의 차이점이 무엇일까?
a) computed 없이 배열에 값이 없는 경우
<template>
<section>
<h1>Fruits</h1>
<ul>
<li
v-for="fruit in fruits"
:key="fruit">
{{ fruit }}
</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: [
// 'Apple', 'Banana', 'Cherry'
]
}
},
// computed: {
// hasFruit() {
// return this.fruits.length > 0
// }
// }
}
</script>
<style lang="scss">
h1, li {
font-size: 50px;
}
</style>
개발자 도구(h1, ul 태그 출력)
출력 화면(h1 태그 내용 출력)
b) computed 사용시 배열에 값이 없는 경우
<template>
<section v-if="hasFruit">
<h1>Fruits</h1>
<ul>
<li
v-for="fruit in fruits"
:key="fruit">
{{ fruit }}
</li>
</ul>
</section>
</template>
<script>
export default {
data() {
return {
fruits: [
// 'Apple', 'Banana', 'Cherry'
]
}
},
computed: {
hasFruit() {
return this.fruits.length > 0
}
}
}
</script>
<style lang="scss">
h1, li {
font-size: 50px;
}
</style>
개발자 도구(아무 내용 없음)
출력화면(내용 없음)
c) 결론
- computed를 사용하면 특정 값의 변화에 따라 웹페이지의 반응을 유도할 수 있다.
- 다시 말해, 어떤 값을 기준으로 페이지 또는 컴포넌트를 새롭게 연산 및 출력하도록 설정할 수 있는 것이다.
4. computed의 동작원리(feat. 캐싱)
<template>
<h1>{{ reverseMessage() }}</h1>
<h1>{{ reverseMessage() }}</h1>
<h1>{{ reverseMessage() }}</h1>
<h1>{{ reverseMessage() }}</h1>
</template>
<script>
export default {
data() {
return {
msg: "Hello Computed!"
}
},
methods: {
reverseMessage() {
return this.msg.split('').reverse().join('')
}
}
}
</script>
<style>
h1{
font-size: 50px;
}
</style>
- 위의 코드는 reverseMessage()라는 메소드를 4번 반복하여 실행되는 구조를 갖고있다.
- 4번 정도면 CPU가 충분히 소화할 수 있는 횟수이지만, 백번 또는 천번 또는 만번 반복된다고 가정하면 웹페이지의 로딩속도가 느려질 수 밖에 없는 작업이다.
- 이러한 부분을 다음과 같이 computed 속성을 사용하여 최적화 할 수 있다.
<template>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
<h1>{{ computedMessage }}</h1>
</template>
<script>
export default {
data() {
return {
msg: "Hello Computed!"
}
},
computed: {
// computed는 연산된 data를 관리하는 공간이다.
// 아래의 computedMessage()는 메소드처럼 선언되었지만
// data처럼 명시 및 사용됨을 기억하자.
computedMessage() {
return this.msg.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.msg.split('').reverse().join('')
}
}
}
</script>
<style>
h1{
font-size: 50px;
}
</style>
a) computed는 어떻게 동작 하는가? (최적화가 가능한 이유)
- computed는 캐시를 사용하여 연산된 값을 저장한다. 이 과정을 캐싱이라고 한다.
- 캐시란, 자주 사용하는 값을 복사해서 저장하는 임시공간이다.
- 반복되는 메소드 호출이 있더라도, 해당 메소드가 computed 속성에 등록되어 있다면 최초에 연산된 값을 캐시에 저장하고 이를 불러와서 사용하는 방식으로 작동한다.
댓글