[Vue.js] Computed Properties

 

 

Computed()

계산된 속성을 정의하는 함수로, 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다.

 

const food = ref([
    {text: '햄버거'},
    {text: '초밥'},
    {text: '부대찌개'}
])

<p>{{ food.length > 0 ? 'food left' : 'no food' }}</p>

 

 

위 코드에 computed를 적용해보자

 

const food = ref([
    {text: '햄버거'},
    {text: '초밥'},
    {text: '부대찌개'}
])

const { createApp, ref, computed } = Vue

const restOfFood = computed(() => {
	return food.value.length > 0 ? 'food left' : 'no food'
})

<p>{{ restOfFood }}</p>

 

 

- 반환값은 computed ref로, 일반 refs처럼 .value로 참조 가능하다

- 의존된 반응형 데이터를 자동으로 추적한다

- 의존된 데이터가 변경될 때만 재평가된다 -> food가 변경될 때만 restOfFood가 업데이트 된다

 

 

Computed vs. Method

computed와 method의 접근 방식은 동일하다.

단, computed 속성은 의존된 반응형 데이터를 기반으로 캐시되기 때문에 의존하는 데이터가 변경된 경우에만 재평가된다.

그에 비해 method 호출은 다시 렌더링이 발생할 때마다 항상 함수를 실행한다.

 

Computed

- 의존하는 데이터에 따라 결과가 바뀌는 계산된 속성을 만들 때 사용된다

- 동일 의존서을 가진 여러 곳에서 사용할 때 계산 결과를 캐싱하여 중복 계산을 방지한다

- 의존된 데이터가 변경되면 자동으로 업데이트된다.

 

Method

- 특정 동작을 수행하는 함수를 정의할 때 사용된다

- 데이터에 의존하는지 여부와 관계없이 항상 동일한 결과를 반환하는 함수이다

- 호출해야지만 실행된다

 

 

--> 목적에 맞게 적절히 사용하기