06 Computed 속성

05 Method 에 이어 두번째 Method 와 비슷하지만 비슷하지 않은 Computed

 

VUE 공식 가이드에 나와 있는 Computed에 대한 설명

 

1. 기본 연산자 

먼저 간단한 연산자를 구현해 보겠다.

data 에 number 라는 변수명으로 1 값을 생성

 

number + 1   = 뭘까영 

브라우저에서 2를 확인 가능

 

2. 약간 복잡 연산자 ?

만약 이런 연산자를 써야 한다고 보자.

message 는 변수명이고 나머지는 자바스크립트 언어에도 존재하는 함수들이다. ( 단어들을 나눠 역순으로 한다음 다시 합친다 라는 의미)

 

변수 message 에는 안녕하세요,

이렇게 선언된 message에 위에 선언한 연산자를 구현한 값을 브라우저로 확인하면 !!!

각 글자로 나눈뒤 역순으로 배열하고 그걸 다시 합친 결과값

 

3. Computed 사용 !!

 

여기서 포인트는 !!!?

 

 

다음은 메서드에 선언하여 사용했을때 인데 여기서 차이점은 reversedMessage 다음에 () 인자값 받는 곳을 작성 안했을 경우 브라우저에 위에 마지막 이지미 처럼 출력이 된다.

 

다시 메서드에대한 올바른 초기화를 해주면, 

 

제대로 출력된다 !

 

4. Computed 약간 응용 ?!

 

간략히 설명하면 처음 METHOD 로 메세지란 변수명으로 선언 했고 1 번째 이미지 처럼 작성했을시 브라우저에서는 

 

먼저 computed 에 대한 기능을 실행하여 METHOD. 에 대한 역순으로 세단어가 나올 것이고 버튼 클릭시 새로운 메세지를 computed 가 역순으로 정렬해 뿌려준다.

 

먼저 버튼 클릭 전 METHOD가 역순으로 출력된걸 확인 가능

버튼 클릭시 '욱태' 라는 글자를 computed 에서 다시 역순으로 만들어 줬다.

Computed 는 브라우저가 처음 로딩될때부터 먼저 계산을 해줘서 뿌려주나 method에 선언한 건 어떤 이벤트 이후 계산을 해준다.