[Vue.js] Computed 와 Computed 캐싱

Computed

 

1. 코드 

components에 있는 Fruits.vue 파일을 App.vue에 import하였습니다.

1.1 App.vue

<template>
  <Fruits />
</template>
import Fruits from '~/components/Fruits'

export default {
  components: {
    Fruits
  }  
}

1.2 Fruits.vue

현재 section 태그는 v-if라는 디렉티브로 hasFruit라는 computed 값을 갖고 있습니다.

computed란 data 옵션에 정의해놓은 특정한 데이터를 추가적인 연산(this.fruits.length > 0)을 통해 정의를 한 후,

그 정의된 값을 반환하여 사용하는 새로운 데이터, 다시 말해 계산된(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>

 

2. 코드 

2.1 Fruits.vue

이번에는 fruits라는 원본 데이터에 reverseFruits 계산된 데이터를 활용하여 li 태그 v-for 디렉티브 속성으로 추가하여 글자를 뒤바꾼 배열로 반환하였습니다.

<template>
  <section v-if="hasFruit">  // computed 속성 추가
    <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"> // v-for 디렉티브에 computed 속성 추가
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: { // coumputed 데이터
    hasFruit() {
      return this.fruits.length > 0
    },
    reverseFruits() {
      return this.fruits.map(fruit => {
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

 

2.2 화면 출력

Reverse Fruits 밑으로 글자가 뒤바뀌어 출력됩니다.

 

Computed 캐싱

3. 표현식 추가

이중 중괄호 문법 사이에 간단한 표현식을 추가하여 작성할 수 있습니다.

또한, 메소드를 추가하는 것도 가능합니다.

<template>
  <h1>{{ msg + '??' }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
</template>

4. 중복 연산

아래와 같이 표현식을 중복해야 하는 경우도 있습니다. 

<template>
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
  <h1>{{ msg.split('').reverse().join('') }}</h1> // 연산 작업 실행
</template>

이를 script 태그에 메소드 데이터로 정의하여 실행하여 깔끔한 코드를 작성했습니다. 그러나 문제는 함수의 실행이 4번 반복되므로 내부의 로직이 총 4번이나 반복적으로 동작하게 됩니다. 

<template>
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
  <h1>{{ reverseMessage() }}</h1> // 연산 작업 실행
</template>

5. Computed 캐싱

4번의 연산이 같기 때문에 4번 중 한 번만 로직이 실행되고 똑같은 값을 반환하는 것이 캐싱 입니다. 

5.1 캐싱

computed를 통해 만든 계산된 데이터는 캐싱이라는 기능을 통해서 한 번 연산해놓은 값을 반복적으로 출력할 때 다시 한번 연산하지 않습니다. 저장되어 있는 캐싱된 값으로 그대로 해당하는 내용을 화면에 출력하기 때문입니다.

이러한 캐싱의 기능으로 데이터를 최적화하는 용도로 자주 사용됩니다. 즉, computed에 작성하는 데이터는 연산이 복잡하더라도 반복 사용하는 데에 있어 부담이 적습니다.

<template>
  <h1>{{ reversedMessage }}</h1> // 첫 출력 시 연산 작업 실행
  <h1>{{ reversedMessage }}</h1> // 실행 X
  <h1>{{ reversedMessage }}</h1> // 실행 X
  <h1>{{ reversedMessage }}</h1> // 실행 X
</template>

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