computed 캐싱

1. h1 태그 자체에 data값을 넣어놓은 결과

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

<style>

</style>

실행결과

2. methods를 통해 reverseMessage() 실행한 결과

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

<style>

</style>

methods에 reverseMessage()로 아래 내용을 담아 준 뒤 반복, 결과는 같다!

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

<style>

</style>

reversedMessage()는 methods처럼 만들기는 했지만, computed로 계산된 데이터! 그러므로 ()로 데이터를 적용할 필요가 없고 바로 사용 가능하다.

위의 코드의 첫번째 h1 태그 같은 경우에는, 한번 계산되었기 때문에
캐싱이라는 기능을 통해 연산이 된 결과 자체를 출력한다.
즉, 100번째 출력을 해도 연산을 한번 해놨기 때문에 추가적인 연산을 하지 않는다. 이게 바로 computed의 캐싱 이라는 거!
데이터를 최적화 하는 용도로, 계산된 데이터를 캐싱 기능을 통해 사용 가능하다.

그러므로 computed는 반복사용해도 부담이 적다.