[VUE] computed 캐싱, Getter, Setter

<template>
  <button @click="add">
    ADD
  </button>
  <h1>{{ reverseMessage }}</h1>
  <h1>{{ reverseMessage }}</h1>
  <h1>{{ reverseMessage }}</h1>
  <h1>{{ reverseMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      // Getter, Setter
      msg: 'Hello Computed!'
    }
  },
  //computed는 캐싱 기능이 있어 반복 연산을 하지 않는다
  computed: {
    // Getter
    // reverseMessage() {
    //   return this.msg.split('').reverse().join('')
    // }
    // Getter, Setter
    reverseMessage: {
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(value) {
        this.msg = value
      }
    }
  },
  methods: {
    add() {
      this.reverseMessage += '!?'
    }
  }
}
</script>