2022-08-09(화)
computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다.
computed는 methods와 비슷하지만, Computed는 캐싱(cache)을 가지고 있다.
*캐싱이란?
캐시(cache)는 잠시 저장해 둔다는 의미를 가진 특별한 기능이다.
매번 번거롭고 느리게 로딩을해야 하는 파일들을 미리 로딩해두고, 발빠른 응답을 주기도함
computed 프로퍼티는 Vue인스턴스 function 내에서 this 키워드와 연결됩니다.
computed 프로퍼티는 data 프로퍼티 / methods 와 같은 scope에 존재하며, 같은 방법으로 안에서
접근할 수 있습니다.
computed 프로퍼티는 기본적으로 getter만 가지고 있지만, 필요하다면 setter 를 지정하는것도 가능하다.
그러기 위해서는 computed 프로퍼티를 get과 set 두가지 프로퍼티를 가진 object로 변경해주어야 함
두 프로퍼티는 computed 프로퍼티를 사용할 때
get은 값을 확인/가져올떄, set은 값을 설정/변경할 때 사용된다.
set methods 을 설정하면, newValue 매개변수를 받습니다.
해당 매개변수는 computed 프로퍼티에 특정 값을 등록하고자 할 때 입력할 새로운 값을 포함하고 있습니다.
그래서 set methods 안에서는 data프로퍼티를 간단하게 업데이트 할 수 있다.
예시 code
<button @click="changeNameSetter("Mark Gonzales")">Change Name (setter)
computed:{
fullName:{}
}
속성예시
이를 보완하기 위해서 computed 속성을 활용함
computed: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
computed와 methods를 사용하는 방법의 최종 결과는 동일하다.
다만 차이점이 한 가지 있다.
computed는 종속 대상(reverseMessage의 종속 대상은 message)을 캐싱한다.
그렇기 때문에 computed는 종속 대상이 변경될 때만 함수를 호출한다.
즉,message 값이 변하지 않는다면 reverseMessage를 여러번 호출해도 다시 계산하지 않고
캐싱한 결과를 즉시 반환한다.
computed 속성의 장점
컴퓨티드 속성은 단순히 vue template 코드의 가독성만 높여줄 뿐만 아니라 컴퓨티드 속성의 대상으로 정한
data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있습니다.
computed 주의사항
1. 컴퓨티드 속성은 인자를 받지 않는다.
2. HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다.
