[VUE] 변수 값이 변할 때 실행되는 프로퍼티 사용하기 (computed)

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 

vue에서 ref 또는 reactive로 선언된 값이 변할 때 실행되는 computed를 알아보려고 합니다.

 

 

1. vue에서 제공하는 computed를 import 하기

vue에서 제공하는 computed를 import 합니다.

computed로 지켜볼 ref 변수를 선언합니다.

ref변수의 값이 변할 때 실행되는 computed 변수를 생성합니다.

 

 

2. ref 변수가 변했을 때 정상적으로 변경되는 지 확인하기

count 값을 +1씩 증가시키는 버튼을 생성했습니다.

'더하기' 버튼을 클릭했을 때 computed의 값이 같이 변하는 것을 확인할 수 있습니다.

 

 

3. function을 사용해서 computed와 동일한 결과 값 만들기

02-1 과 같은 방식으로도 동일한 결과를 출력할 수 있습니다.

 

 

4. function과 computed의 차이점 확인하기

# function은 매개변수를 받을 수 있음
const countFunction = (param) => {
  return count.value + param;
};

# computed는 매개변수를 받을 수 없음
const countComputed = computed(() => {
  return count.value + 1;
});

# function은 매번 호출되지만 computed는 캐싱을 함

같은 function, computed를 template에서 출력하기

캐싱을 확인하기 위해 console.log를 추가했습니다.

 

 

5. computed의 캐싱 확인하기

function은 선언될 때마다 출력되지만, computed는 한 번 선언된다면 캐싱으로 출력을 합니다.

 

자주 출력되어야 하는 상황이 온다면 computed를 사용해야합니다.

 

해당 프로젝트는 gitlab에 제공되고 있습니다.

https://github.com/JeongSeongSoo/vue-tistory

GitHub - JeongSeongSoo/vue-tistory

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

 

휴먼모션 브랜드 론칭 기념 1+1 시크릿 기획 판매