computed #2306

#computed

1.  vue3 
state 선언문 내에 computed 속성에 대한 선언 구문을 추가하는 것으로 변화
const 변수명 = computed(() => 계산식; // Composition api가 추가 되면서 함수형식으로 가져옴


2.  vue2  - class 컴포넌트일 경우

getter 함수 - 나의 경우 class 형식으로 만들었기 때문에 아래와 같이 작성하였음 - class가 아니라면 함수형으로 적으면 된다.

get 함수명(): 리턴타입 {  // 리턴타입 예) string - 타입스크립트를 사용하지않을경우는 타입을 적지 않아두 됨
   return 조건문 ? true일때값 : false일때 값; // 3항 연산자
}

 

++ 컴포넌트 내부에서 함수명으로 사용할 수 있다.  예) v-if="함수명"


3. computed와 getter와 setter

computed는 어떠한 값(props, this.data)을 변화하여 손쉽게 사용하기 위한 메소드 이며
computed를 통해 나온 값을 바꾸고 싶을 때는 getter, setter 을 이용!


4. 언제 쓰나요?

1) 데이터를 가공할 때 computed 를 사용
2) computed 에 있는 메소드들은 기본적으로 Getter 를 이용해 값을 가져온다고 보면 된다.

 

# ?? 과  ? 차이

조건문을 쓸때

const 변수명 = `어떠한값`;

document.title = to.meta.title ?? 변수명;


이렇게 조건문을  ? 을 안쓰고 ?? 을 쓸경우에는 ?? 왼쪽 조건문이 있을경우에는 왼쪽값을 쓰고 없을때는 오른쪽 변수명을 쓰라는 것이다.
(예: 어떠한 배열등에서 왼쪽값으로 정리한것이 있을때는 왼쪽값을 쓰라는 뜻)