탄생 배경
이렇게 중괄호 안에 로직이 들어가게 되면 향후 읽기가 너무 어려워 진다.
이런식으로 computed함수를 사용하면 로직을 계산해서 속성값으로 할당할 수 있기 때문에, 중괄호는 {{ hasLecture }} 로 간단해 진다.
코드예제
코드 복사하기
teacher 를 반응형 객체로 선언하자
자바스크립트 문법
자바스크립트 문법을 템플릿 문법에 넣어서 구현할 수 있다.
이렇게 있으니까 있음
하지만 로직인 템플릿 안에 들어가게 되면, 나중에 가독성이 너무 떨어지게 된다. 비효율적이다.
이럴 때 사용하는 것이 computed이다.
computed 함수
계산된 속성을 hasLectures로 할당할 수 있고, 그렇게 하면 템플릿표현이 아주 깔끔해진다.
method로 해도 되지 않나?
물론 메소드로 똑같이 할수 있고, 템플릿 문법은 약간 바뀐다.
결과도 역시 같다.
•
차이점
사진과 같이 computed함수는 계산된 내용을 캐시로 보관한다.
그래서 method처럼 실행될 때마다 계산하는 것이 아니라,
같은 함수를 사용한다면 캐시된 값을 사용하고, 그리고 그 값이 변경이 될 때 다시 그린다.
버튼을 만들어서 테스트 해보자
버튼을 만들어서 counter의 수가 증가될 수 있도록 구현해보자.
vue 개발자 도구를 열어서 업데이트 되는 곳을 확인할 수 있게 세팅
위 설정으로 버튼이 클릭이 되면 업데이트 되는 구간을 초록색 박스로 확인할 수 있다.
업데이트가 3번 되는동안, method는 계속 연산을 했고,
computed는 캐시가 되어있기 때문에 연산을 한 번만 수행한 것이 확인된다.
변경가능한 computed
computed함수는 일반적으로 getter전용이다. 계산된 속성에 새 값을 넣으려고 하면 런타임 경고가 뜬다. 하지만 이것도 변경가능한 computed가 될 수 있게 작성이 가능하다.
코드 예제
이렇게 firstName과 lastName을 조합하여 fullName을 만들고,
fullName을 ‘짐 코딩’으로 업데이트를 해보자.
computed함수로 계산된 값은 readonly 속성을 가지기 때문에 업데이트가 되지 않는다는 메시지를 받았다.
getter, setter
•
getter
compute함수는 get메소드와 set메소드를 인자로 받을 수 있다.
보통 set함수가 없다면 fullName으로 출력하는 값은 get 메소드의 계산된 값이다.
•
setter
computed된 속성에 .value를 사용하면 set함수를 호출하고 값을 할당해서 계산한다.
•
결과 확인
그래서 이렇게 콘솔에는 홍 길동이 찍히지만,
화면에는 짐 코딩으로 업데이트 되었다.