Vue의 computed와 methods와 비교 | computed의 getter & setter 세팅

Coumpted 기초

템플릿 표현식 내의 코드가 길어질 경우 가독성이 떨어지니 computed (계산된 속성)을 사용한다.

 

🎈computed vs methods

method를 사용하면 computed와 동일한 효과를 얻을 수 있다.

하지만 computed는 결과가 캐시되고, method는 매번 실행된다.

computed는 내부 반응형 데이터가 변경될 경우 다시 계산하기 때문에 computed가 더 효율적이다.

다만, method는 파라미터를 활용할 수 있다.

 

🎈Writable computed

기본적으로 computed는 getter 전용이다.

하지만 필요한 경우 getter와 setter 모두 제공하여 속성을 만들 수 있다.

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