Vue.js - computed속성

computed 속성이란? 데이터와 흡사하며 어떠한 값을 계산된 값으로 제공해주는 속성을 정의한다.

사용 예시)

• 예를 들어 3개의 변수가 있고 그 3개의 변수를 하나로 합치려고 할 때 join()과 같은 제공함수를 사용하게 된다. 하지만 computed 속성을 사용할 경우, 여러번 쓸 필요없이 한번 만 사용해도 정의한 대로 값을 사용할 수 있다.

{{valueSum}}
<script>
	new Vue({
    	data() {
        	return{
            	value1 : '1번',
                value2 : '2번',
                value3 : '3번',
                goal:{
                	math: 90,
                    kor: 100,
                    computer: 100
                }
            };
        },
        computed : {
        	valueSum() {
            	return `${this.value1} ${this.value2} ${this.value3}`};
            }
        }
    });
</script>

이렇게 하여 computed 속성을 사용할 수 있다.

computed 속성과 methods의 차이

computed와 methods를 보았을 때 똑같이 함수를 사용하여 값을 나타내게 된다. 그러면 다른 점은 무엇이 있을 까?

차이점

1. computed는 우리가 작성한 값을 도출하기 위해 필요한 값들이 캐시가 된다.(어떤 값이 직접적으로 변화하기 전까지 계산을 더이상 수행하지 않음.
2. methods는 작성한 값 이외에 다른 값이 변하게 되면 그때마다 계속 계산을 수행하게 된다.

결론

• computed는 간략한 계산을 사용할 때 사용한다.
• 어떠한 값이 계속 변화한다면 computed를 사용하는 것을 권장.
• methods는 복잡한 로직을 수행할 때 사용하는 것을 권장.

구조 분해 할당

• 구조체를 만들어 변수를 할당했을 때, 구조체를 분해하여 값을 담을 변수를 생성하고 해당 값을 집어넣는 방식.

computed: {
	totalGoal(){
    	const {math, kor, computer} = this.goal;
        return math+kor+computer; 
    },
}

위에서 만든 자료를 이용하기 위해 computed내부에 변수를 할당하는 computed를 만들었다. 이것을 {{totalGoal}}을 사용하게 되면 구조체 내부에 있는 값을 가져와 분해하고 사용하게 된다.