Vue에서의 계산된 속성

다른 속성을 기반으로 반응적으로 계산되는 속성을 정의할 수 있습니다. 이러한 속성을 계산된 속성이라고 합니다. 이들은 computed 설정 옵션 내에 위치합니다.

예제를 통해 살펴보겠습니다. 속성에 사용자의 이름과 성이 저장되어 있다고 가정해 봅시다:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

성과 이름이 포함된 전체 이름을 담는 full 속성을 만들어 보겠습니다:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

템플릿에서 속성들의 내용을 출력해 보겠습니다:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

계산된 속성은 반응적으로 변경됩니다. 이는 이름이나 성을 변경하면 full 속성도 자동적으로 반응하여 즉시 변경되며, 화면에서 변화를 바로 볼 수 있다는 의미입니다.