[Vue] Computed 속성의 Getter와 Setter

⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. Computed 속성의 Setter

 

---

 

computed 옵션 (Getter 기능)

computed 옵션에 있는 함수의 리턴값은 읽기 전용(READ ONLY)이다. 값을 얻어내는 용도로만 사용하므로 reverseMsg는 Getter다.

computed: {
  // 값을 얻어오는 용도로 사용하는 함수 (Getter)
  reversedMsg() {
    return this.msg.split('').reverse().join('');
  },
}

 

Setter 기능을 추가한 computed 옵션

computed 옵션에 있는 reverseMsg 함수를 Getter, Setter가 모두 가능하게 하기 위해 다음과 같이 함수를 수정한다:

1. reversedMsg라는 객체를 만들어준다
2. get(), set() 메서드를 만들어준다
3. reversedMsg가 값을 얻어오는 용도의 로직은 get()으로 넣어준다
4. reversedMsg가 값을 할당하는 용도의 로직은 set()으로 넣어준다

computed: {
  reversedMsg: {
    get() {
      // 값을 얻어오는 용도의 로직
    },
    set(value) {
      // 값을 할당하는 용도의 로직
    },
  },
},

 

예제

<template>
  <button @click="add">Add *</button>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Computed',
    };
  },
  computed: {
    reversedMsg: {
      get() {
        return this.msg.split('').reverse().join('');
      },
      set(value) {
        this.msg = value;
      },
    },
  },
  methods: {
    add() {
      this.reversedMsg += '*';
    },
  },
};
</script>