1. computed
: 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성
아래 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. message 값이 만약 Hello라면 화면에 출력되는 값은 olleH로 된다. 이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어지게 된다. 따라서 아래와 같이 computed 속성을 활용해야 한다.
1-1) computed의 사용
computed의 사용 전
<div>{{ message.split('').reverse().join('') }}</div>
- 이렇게 템플렛안에 기술하는 것이 더 편리하다.
- 그렇지만, 코드가 길어지면 길어질수록 점점 보기가 힘들어지고 복잡해지게 된다.
- 특히, 유지보수가 어려워지게 된다.
computed의 사용 후
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
문자열을 역으로 변환하는 로직을 computed 속성에 정의했다.
<div>{{ reverseMessage }}</div>
→ 템플릿 안에 사용하고자 할 때는 이렇게 사용하며 된다. 이렇게 변화했을 때,
- 다른 태그에서도 자유롭게 메소드를 사용할 수 있게 되었다.
- 그리고 재사용성이 용이하게 되었다.
1-2) 연산 setter 함수
: Computed는 캐싱(cache)을 가지고 있다.
computed속성은 Vue 인스턴스 Function 내에서 this키워드와 연결된다. computed속성은 data 프로퍼티 / methods와 같은 scope에 존재하며, 같은 방법으로**<template>에** 접근할 수 있다.
computed 프로퍼티는 기본적으로getter만 가지고 있지만, 필요하다면setter를 지정하는 것도 가능하다. 이를 위해서는 computed 프로퍼티를 get과 set 두가지 프로퍼티를 가진 object 로 변경해줘야 한다.
<aside> 💡 get은 값을 확인/가져올 때, set은 값을 설정/변경할 때 사용된다.
</aside>
1. 공식
computed: {
fullName: {
get: function () { ... }, // get () { ... }
set: function (newValue) { ...} // set () { ... }
}
}
2. 사용
// templates
<button v-on:click="changeNameSetter("Mark Gonzales")">
Change Name (setter)</button>
// script
computed: {
fullName: {
get () {
alert("Assembling Full Name ... ");
return this.firstName + ' ' + this.lastName;
},
set (newValue) {
alert("Setting new name: " + newValue);
const parts = newValue.split(' ');
this.firstName = parts[0];
this.lastName = parts[parts.length - 1];
}
}
},
methods: {
// ...
changeNameSetter: function(newName) {
this.fullName = newName;
}
},
data: {
firstName: 'Bo',
lastName: 'Andersen'
}
→ computed fullName은 data를 의미한다. 그래서 함수에서 보면 newName은 fullName으로 넣어준다.
name을 가져와서 get은 alert창으로 띄어주고, set은 새로운 변수하여 만들어서 출력해준다. 즉, 이를 업데이트해서 data에 있는 firstName과 lastName으로 업데이트해주는 것이다.
1-3) methods과의 비교
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
이와 같은 코드가 있을 때
- computed는 리액티브(Reactive, 반응적)인 의존관계에 의해 캐쉬화되어 진다. 즉, 종속성이 있다고 말한다.
- message가 변하지 않는 한 reversedMessage가 몇번이고 불려져도, 함수는 다시 실행되는 것이 아닌 이전에 계산되어진 결과를 즉시 돌려준다.
- 반면 methods는 렌더링(rendering)을 다시 할 때마다 항상 함수를 실행한다.
→ 계산이 많이걸리는 A가 있다고 가정하면, 이 A계산을 계속해서 실행하면 시간이 점점 느려지게된다. 때문에 computed를 사용한다면 전에 계산되어 있던 결과를 그대로 반환하기 때문에 속도가 빠르다. 둘이 기능적으로 비슷하니,
<aside> 💡 캐쉬를 사용하지 않아도 되는 경우는 method를, 캐쉬를 사용해야 하는 경우에는 computed를 사용하자!
</aside>
2) computed 속성의 장점
computed 속성은 단순히 뷰 템플릿 코드의 가독성만 높여줄 뿐만 아니라 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.
3) computed 속성 주의사항
1. 컴퓨티드 속성은 인자를 받지 않는다.
<div>{{ reverseMessage(false) }}</div>
computed: {
reverseMessage(isReversed) {
return isReversed ? this.message.split('').reverse().join('') : this.message;
}
}
→ 이렇게 인자를 받으면 해당 템플릿을 실제 DOM으로 변환할 때 라이브러리에서 에러를 발생시킨다.
2. HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다.
data: {
message: ''
},
computed: {
reverseMessage() {
var vm = this;
axios.get('/message').then(function(response) {
vm.message = response.data;
});
return this.message.split('').reverse().join('');
}
}
→ 코드가 길어지면 비싼 비용을 돌려 구현해야 한다. 이런 axios등이 그러하다. computed는 말 그대로 가독성을 위한 것이기에 코드가 길어지는 경우 methods나 watch등 리소스가 많이 할애되는 것은 이곳에 넣는 것을 추천한다.
🔗 참고
https://joshua1988.github.io/vue-camp/syntax/computed.html#computed-속성-예시
https://velog.io/@jinsu6688/vuejs-computed
