[Vue.js] Computed 속성

Vue.js의 공식 문서를 참고하여 정리합니다.

https://v3.vuejs-korea.org/guide/computed.html#computed-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC

Computed 속성과 Watch | Vue.js

 

Computed

계산된 데이터를 말합니다.

template에 바로 넣기보다는 computed 속성을 활용하여 계산된 데이터들을 넣어서 사용해주면 유지보수가 쉽습니다.

 

먼저, Num 컴포넌트를 생성한 후, App.vue파일에 불러와줍니다.

App.vue 파일

<template>
  <Num/>
</template>

<script>
import Num from './components/Num.vue'

export default {
    components: {
        Num: Num
    }
}
</script>

<style>
</style>

 

그리고 기존 방식과 같이 template에 조건문(v-if)을 바로 추가하였습니다.

Num.vue 파일

<template>
    <section>
        <h1 v-if="nums.length > 0">Numbers</h1>
        <ul>
            <li
            v-for="num in nums"
            :key="num">
            {{ num }}
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data(){
        return {
            nums: [
                '1', '2', '3'
            ]
        }
    }
}
</script>

<style scoped>

</style>

 

위 방식을 computed 속성을 사용하여 변경해보겠습니다.

Num.vue 파일

<template>
    <section>
        <h1 v-if="hasNum">Numbers</h1>
        <ul>
            <li
            v-for="num in nums"
            :key="num">
            {{ num }}
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data(){
        return {
            nums: [
                '1', '2', '3'
            ]
        }
    },
    computed: {
        hasNum() {
            return this.nums.length > 0
        }
    }
}
</script>

<style scoped>

</style>