7_computed

1. computed 

: 템플릿 문법 안에 내용이 길어지면 가독성이 떨어지기 때문에 계산한 속성을 사용할 수 있도록 해주는 함수.

간결하고 선언적이므로 반복하여 사용하더라도 코드가 복잡해지지 않는다.

const hasLecture = computed(() => {
  return teacher.lectures.length > 0 ? 'Yes' : 'No'
})

<p>강의가 존재 합니까?:</p>
<span>{{ hasLecture }}</span>

 

 

2. computed 와 메서드의 차이

결과적으론 같지만, 아래의 차이점을 가짐

-메서드는 파라미터를 가질 수 없다.

-computed 로 계산된 값은 캐시로 저장된다.

-computed는 내 반응형 데이터가 변경된 경우에만 다시 계산되므로 랜더링 시 경제적임.

 

3. computed의 값을 변경하고 싶을 때

computed의 값은 기본적으로 읽기 전용이므로 get()으로 새로운 데이터를 가져오고 set()으로 다시 재할당 해줄 수 있다.

import { computed, ref } from 'vue';
export default {
  setup() {
    const firstName = ref('홍');
    const lastName = ref('길동');

    const fullName = computed({
      get() {
        return firstName.value + ' ' + lastName.value;
      },
      set(newValue) {
        [firstName.value, lastName.value] = newValue.split(' ');
      },
    });

    fullName.value = '안녕 하세요';
    return {
      firstName,
      lastName,
      fullName,
    };
  },
};