Computed
반응형 데이터를 이용한 계산된 속성

computed방법과 method를 이용한 방법 차이

computed는 캐시가 가능하고 method는 캐시가 불가능하다
즉, 렌더링이 두번되어도 computed함수가 실행되지 않는다
computed함수 안에서의 반응형 변수가 값이 바뀔때 함수가 실행된다

setup() {
		const teacher = reactive({
			name: '짐코딩',
			lectures: ['HTML/CSS', 'JavaScript', 'Vue3'],
		});

		const hasLecture = computed(() => {
			console.log('computed');
			return teacher.lectures.length ? '있음 🙂' : '없음 🥲';
		});
		//캐시 가능

		const existLecture = () => {
			console.log('method');
			return teacher.lectures.length ? '있음 🙂' : '없음 🥲';
		};
		//캐시 불가능

		const counter = ref(0);
}

<p>{{ hasLecture }}</p>
<p>{{ hasLecture }}</p>
<p>{{ existLecture() }}</p>
<p>{{ existLecture() }}</p>
<button v-on:click="counter++">counter: {{ counter }}</button>

각각 두번씩 렌더링

computed
Console 출력:  있음 🙂
value:  짐 코딩
method
method //두번호출

처음 렌더링된 상태에서 콘솔을 확인해보면 method함수 내 console은 두번 실행되었고, computed내 console은 한번 실행되었다.
또한, counter를 증가시키는 버튼을 누를때마다 Vue가 갱신되어 method를 계속 출력한다.
즉, 클릭할때마다 2번씩 렌더링때문에 2번씩 method를 호출한다

만약 computed에 다른 값을 대입하려면?

아래의 코드는 오류가 발생한다

console.log('Console 출력: ', hasLecture.value);
hasLecture.value = '다른 값'; //여기서 오류가 난다

computed에 다른 값을 넣으려면? computed속성에 getter, setter 사용

computed값 변경 예시

const firstName = ref('홍');
const lastName = ref('길동');

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(value) {
    console.log('value: ', value);
    [firstName.value, lastName.value] = value.split(' ');
  },
});

fullName.value = '짐 코딩'; // 값이 변경되었다~

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...