Computed 캐싱

Computed 캐싱 기술을 이용하여 복잡하거나 간편한 연산을 한번 계산하여 나온 반환값을 여러번 사용할 수 있다.

 

App.vue 파일

<template>
  <!-- 문자를 배열로 한문자씩 쪼개고 다시 붙여서 출력 -->
  <h1>{{ msg.split('') }}</h1>
  <h1>{{ msg.split('').reverse() }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
  <!-- 함수로 선언 -->
  <h1>{{ reverseMessage() }}</h1>
  <!-- 데이터와 같이 사용 -->
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Computed!'
    }
  },
  // 계산된 데이터를 반복적으로 사용할 수 있다.
  computed: {
    reversedMessage() {
      // 캐싱된 데이터로 이미 연산이 된 데이터를 반환한다.
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    reverseMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

 

 

브라우저 확인