Vue 문법(1) - computed, getter/setter, watch

인스턴스와 라이프사이클

vue 인스턴스

 

모든 vue 어플리케이션은 createApp 함수를 사용하여

새로운 어플리케이션 인스턴스를 생성하여 시작합니다.

 

vue 라이프사이클 훅

 

각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다.

과정에서 라이프사이클 훅이란 함수도 실행하여,

사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다.

 

템플릿 문법

템플릿 문법 참조 문서

 

v-on, v-bind, {{ }} 등 기본 문법을 소개해줍니다.

 

Computed 옵션

computed는 계산된 데이터입니다.

예시처럼 계산된 데이터를 함수형태로 반환합니다.

태그 안에 v-for혹은 v-if를 사용시 길게 작성할 필요없이

짧고 명확하게 보입니다.

 

Computed 캐싱

methods를 사용하면 똑같은 로직을 4번을 반복해서 계산하는 겁니다.

computed는 1번만 계산하고 결과값을 반복해줍니다.

이게 computed의 캐싱 특성때문입니다.

 

Getter, Setter

위 내용에 이어 버튼에 add 기능을 추가합니다.

그치만 !?를 그대로 생기지 않습니다.

이게 Computed는 읽기전용(readonly)이기때문입니다.

값을 얻어내는 용도이며, 즉, Getter입니다.

 

하지만 원본 msg에 직접 이벤트를 추가해서 실행하면 결과가 변해집니다.

값을 지정할 수 있어서 setter입니다.

즉, 원본 msg는 getter이면서 setter입니다.

 

computed에 함수 대신 데이트 안에 get와 set로 만들 수 있습니다.

그러지만 방금위에 원본 msg가 setter일때와 출력 결과가 다릅니다.

 

reversedMessage의 get부분에서 먼저 출력하고,

add메소드는 set를 통해 해당 문자열 뒷부분에 !?를 추가했습니다.

또 다시 get을 활용해서 다시 뒤집었습니다.

 

Watch

특정 데이터들이 변경사항을 감시하는 옵션입니다.