[Vue.js][Ch2][Vue 문법] Computed 캐싱

<template>
  <h1>{{ msg + '??' }}</h1>
  <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>
export default {
  data() {
    return {
      msg: 'Hello Computed!'
    }
  }
}
</script>

<h1>{{ msg.split('').reverse().join('') }}</h1> 를 반복 선언하는 건 비효율적이다.

<template>
  <h1>{{ msg + '??' }}</h1>
  <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>

 method를 사용해서 대체할 수도 있지만, 마찬가지로 함수를 계속 실행되어야 한다.

=> 로직이 네번을 반복 동작하는 것은 똑같다.

<template>
  <h1>{{ msg + '??' }}</h1>
  <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('');
    }
  },
  methods: {
    reverseMessage() {
      return this.msg.split('').reverse().join('');
    }
  }
}
</script>

computed는 캐싱이라는 기능이 있기 때문에 한번 연산된 값은 다시 연산하지 않는다.
=> 반복 사용에 부담이 적다.