[Vue.js] Vue 계산된 속성 (Computed Properties)

계산된 속성 (Computed Properties)

 

템플릿 내 표현식은 간단한 코드에 적합하며, 템플릿에 많은 논리가 있다면 유지 관리가 어려워집니다.

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

따라서 반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋음.

 

<script>
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      },
      firstName : 'John',
      lastName:'Doe'
    }
  },
  computed: {
    // 계산된 값을 반환하는 속성
    publishedBooksMessage() {
      // `this`는 컴포넌트 인스턴스를 가리킵니다.
      return this.author.books.length > 0 ? 'Yes' : 'No'
    },
    fullName:{
      get(){
        return this.firstName + ' ' + this.lastName
      },
      set(newValue){
        [this.firstName, this.lastName] = newValue.split(' ');
      }      
    }
  }
}

</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ publishedBooksMessage }}</span>
  <hr>
  <div>Name: {{this.fullName }}</div><!-- get() -->
  <div>이름: {{ this.fullName='길동 홍'}}</div>
  <!-- <div>이름: {{ this.fullName='  김'}}</div> -->
</template>