[Vue.js] 05. computed - Getter, Setter

Data 속성의 경우 기본적으로 Getter와 Setter를 동시에 제공한다.

이처럼, 버튼을 누르자 firstName 속성이 변경되며 반응성을 통해 화면에 출력된다.

 

Computed 속성은 기본적으로 Getter만 제공한다.

아무리 plus? computed 라는 버튼을 눌러봤자 변하지 않는다.

Computed 속성에서 Setter를 사용하기 위해서는 별도의 get과 set 메소드를 지정해주어야 한다.

set메소드에서는 data에 있는 속성에 값을 저장하는 로직을 구현해야 한다.

computed를 그대로 불러오는 재귀형식으로 로직을 구성하게 되면 제대로 동작하지 않는다.

 

get이나 set을 설정하더라도 사용법은 그대로 프로퍼티명을 사용하면 된다.

일반적인 경우에는 사용하지 않지만, Vuex(store, 중앙 집중식 저장소)에서는 유용하게 활용할 수 있다.