[Vue.js] computed 속성의 getter와 setter

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <p>짝수 여부: {{ evenOrOdd }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 반응성 있는 변수 생성
const count = ref(0);

// count가 짝수인지 여부를 계산하는 computed 속성
const evenOrOdd = computed({
  get: () => {
    return count.value % 2 === 0 ? '짝수' : '홀수';
  },
  set: (newValue) => {
    count.value = newValue * 2;
  }
});

// count를 증가시키는 함수
const increment = () => {
  count.value++;
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서 computed 속성을 사용할 때, getter와 setter를 활용하여 값을 계산하고 설정할 수 있습니다.

위의 예제는 카운트 변수를 생성하고, 해당 변수가 짝수인지 여부를 계산하는 computed 속성을 만드는 예제입니다. 이번에는 getter와 setter를 함께 사용하여 값을 계산하고 설정합니다. getter는 현재 카운트 값이 짝수인지 여부를 반환하고, setter는 짝수 여부에 따라 카운트 값을 변경합니다.

이렇게 getter와 setter를 함께 사용하여 computed 속성을 정의하면, 해당 속성을 통해 값을 읽고 쓸 때마다 getter와 setter가 자동으로 호출되어 값을 계산하고 설정할 수 있습니다. 이는 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.