Vue.js 문법 - Computed

 

Computed 속성

 

- 계산된 속성, 읽기 전용(Readonly)

- 종속 대상을 따라 저장(캐싱)

- data 속성에 변화가 있을때 자동으로 다시 연산

 

예제1

 

<!-- App.vue -->
<!-- components 내부 Fruits.vue 를 import하여 화면에 출력 -->

<template>
  <Fruits />
</template>

<script>
import Fruits from '~/components/Fruits'
export default {
  components: {
    Fruits
  }
}
</script>

 

<!-- Fruit.vue -->

<template>
  <section v-if="hasFruit">
    <h1>Fruits</h1>
    <ul>
      <li 
        v-for="fruit in fruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
  <section>
    <h1>Reverse Fruits</h1>
    <ul>
      <li 
        v-for="fruit in reverseFruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    hasFruit() {
      return this.fruits.length > 0
    },
    reverseFruits() {
      return this.fruits.map(fruit => {

        // 'Apple' => ['A','p','p','l','e']
        // => ['e','l','p','p','A'] -> 'elppA'
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

<style>
  body {
    font-size: 50px;
  }
</style>

 

결과

 

Computed 캐싱

 

<!-- App.vue -->
<!-- Method 사용 (비효율적)  -->

<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>

 

<!-- App.vue -->
<!-- Computed 사용 (효율적) -->
<!-- 계산된 데이터 (캐싱) 기능 -->
<!-- 한번 연산 해놓은 값은 반복적으로 계산하지 않는다 -->

<template>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello Computed!",
    }
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
};
</script>