vue - 계산된 속성: computed

템플릿에 너무 많은 논리를 넣으면안된다.

 

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }
}



<p>책을 가지고 있다:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

 

위와 같은것은 좋은 예제가 아니다.

 

계산된 속성을 사용해야한다. 

 

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

 

=> 이부분에대해서 이후에 코드 고도화 하는 작업에서 어떻게 해야할지 고민해봐야될것같다.

 

publishedBooksMessage 같은경우에는, author.books에 의존이된다.

그럼으로 methods의 어떤함수를 통해서 books를 변화시키면, computed의 값도 자동 바인딩된다. 

 

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

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
  <button @click="test">여기서뭔가</button>
</template>

 

이렇게바꿔보니 

 

span의 값이 yes에서 no로 바뀜을 알 수 있다.

 

---

계산된 캐싱 vs 메소드

 

계산된 캐싱과 메소드가 다른점은 무엇일까?

계산된 속성은 의존된 반응형을 기반으로 캐시된다. => useMemo사용과 비슷한 원리.

공식문서를 봐보면 복잡한 연산결과는 넣어두고 다른부분이 리렌더링되어도 다시 계산되지않는것같다. 

 

반면 메소드는 리렌더링이 될때마다 새로운 함수 호출

 

---

수정가능한 계산된 속성 

 

 

getter로서 Retrun된값이 원칙이긴하나, 수정을 할수도있는데

예를들어,

 

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 참고: 분해 할당 문법을 사용함.
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

 

 

newValue가 sophie lee라고 했을경우?

firsName 이 sophie, name이 Lee로 state가 업데이트된다.

이를통해서 계산된값도, 자동으로 업데이트가된다는 의미

 

계산된 값 자체를 변경하지는 말자. => pure하게 움직이자. read only로