Vue.js 문법 - Getter, Setter

 

예제

 

<!-- App.vue -->
<!-- 실행순서 add -> set -> get -->

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

<script>
export default {
	data() {
		return {
			// Getter, Setter
			msg: 'Hello Computed!'
		}
	},
	computed: {
		// Getter
		// reversedMessage() {
		// 	return this.msg.split('').reverse().join('');
		// }

		// Getter, Setter
		reversedMessage: {
			get() {
        console.log('get')
        return this.msg.split('').reverse().join('');
			},
			set(value) {
        console.log('set')
        this.msg = value
			}
		}
	},
	methods: {
		add() {
      console.log('add')
			this.reversedMessage += '!?'
		}
	}
};
</script>