8. computed

템플릿 문법 {{ }}은 간단히 사용하면 매우 편리하지만

템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워진다.

 

 

이럴때 사용하는게 computed 이다.

 

---

arrow 함수임으로 명령어가 하나일때는 retrun과 중괄호 생략이 가능하다.

---

computed가 아닌 메서드로도 구현 가능하지만, 메서드이기 때문에 템플릿 문법에서 실행할때 () 괄호를 넣어줘야한다.

결과는 똑같지만 computed 가 성능면에서 비용이 적게 든다.

 

왜냐하면 computed는 안에서 계산된 값이 캐시되기 때문이다.

같은 컴포넌트 안에서 existLecture, hasLecture를 여러번 호출해보자.

method는 두번 호출되고 computed는 한번만 호출된다.

그 이유는 computed는 한번 계산된 결과를 내보낸다. 

보관하고 있다가 캐시된 데이터를 돌려준다.

하지만 메서드는 실행 될 때마다 찍힌다.

 

computed의 캐시 가 바뀌는 시점은 반응형 데이터가 바뀌는 시점뿐이다.

 

이렇게 computed를 사용하면 성능면에서 유리하다.

컴포넌트가 다시 렌더링 된다해도 computed로 계산된 속성은 다시 계산되지 않기 때문에

조금 더 유리하다.

 

---

computed는 기본적으로 getter 전용이다.

계산된 속성에 새 값을 할당하려고 하면 런타임 경고가 표시된다.

이렇게 값을 바꾸는건 안된다. readonly라고 경고 표시가 뜬다.

 

 

새로운 계산이 필요한 경우에는 getter와 setter를 모두 제공하여 속성을 만들 수 있다.

setter 예제는 firstName, lastName을 ' '를 기준으로 배열로 저장해서 기존변수에 구조분해 할당한 예제.

 

setter 예제는 firstName, lastName을 ' '를 기준으로 배열로 저장해서 새로운 변수를 선언 후, 구조분해 할당한 예제.