계산된 속성 (Computed Properties)

계산된 속성은 Vue의 데이터 변경에 기반하여 자동으로 업데이트되는 읽기 전용 속성입니다.

경우에 따라 읽기-쓰기 속성으로도 활용할 수 있습니다.

데이터에 기반해서 가공처리를 할 때 사용하고, 연산비용이 높지 않아 Vue에서 권장하는 방법입니다.

데이터가 바뀌면 캐싱을 풀고 다시 계산합니다.

<script>
export default {
  data() {
    return {
      firstName: "Jane",
      lastName: "Doe",
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

fullName은 캐싱되며, firstName 또는 lastName이 변경될 때만 다시 계산됩니다.

계산된 속성에 getter와 setter를 정의하여, 데이터를 양방향으로 바인딩할 수 있습니다.

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Smith",
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const parts = newValue.split(" ");
        this.firstName = parts[0] || "";
        this.lastName = parts[1] || "";
      },
    },
  },
};
</script>

<template>
  <div>
    <input v-model="fullName" />
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
  </div>
</template>

사용자 입력에 따라 firstName과 lastName을 자동으로 업데이트할 수 있습니다.