vue3 computed 캐싱

//중괄호 내부에서 문자 합치기, 변형하기
{{ msg+'!?' }}

{{ msg.split('').reverse().join('') }} //h1 태그 내부
{{ reverseMessage() }} //methods
{{ reversedMessage }} //computed.

computed 캐싱 - 한번 계산을 하면 저장된 값을 
- computed에서 만들어둔 데이터는 캐싱이라는 기능이 있어서 한번 연산을 해두면 반복적으로 데이터처럼 화면에 출력할때 또 계산을 하지않음.
가지고 있는 데이터를 출력해줌
- 여러차례 출력되는 데이터 일땐 계산된 가지고 있는 데이터(캐싱)를 통해서 출력을 해준다.

기본적으로 application을 만들때 데이터를 최적화 할때 캐싱 기능을 이용할수있다.


computed 에는 getter와 setter

<template>
  <!-- <h1>{{ msg.split('').reverse().join('') }}</h1> -->
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reverseMessage() }}</h1>
  <h1>{{ reverseMessage() }}</h1>
</template>

<script>
export default {
  data:function(){
    return {
      msg:'Hello Computed!'
    }
  },


// - computed에서 만들어둔 데이터는 캐싱이라는 기능이 있어서 한번 연산을 해두면 
//   반복적으로 데이터처럼 화면에 출력할때 또 계산을 하지않음.
//   가지고 있는 데이터를 출력해줌
// - 여러차례 출력되는 데이터 일땐 계산된 가지고 있는 데이터(캐싱)를 통해서 출력을 해준다.

// 기본적으로 application을 만들때 데이터를 최적화 할때 캐싱 기능을 이용할수있다.
  computed: {
    reversedMessage(){
      return this.msg.split('').reverse().join('')
    }
  },



  methods: {
    reverseMessage(){
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>