vue3 computed - getter setter

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

  <button @click="add()">
    ADD~!
  </button>
</template>

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


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

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

  // computed의 값은 기본적으로 '읽기'전용이다.
  //
  methods: {
    add(){
      this.reversedMessage += '?!'
    //  this.msg += '!?'
    }
  }
}
</script>