06 Computed 속성
템플릿 표현식({{ }})안에 코드를 넣어서 사용할 수 있지만, 코드가 복집해지고 유지보수가 어려워진다는 단점이 있음
복잡한 연산은 computed 속성을 사용하는게 좋음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ reversedMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message:'자바스크립트'
},
methods: {},
computed: {
reversedMessage(){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>결과화면
computed를 사용하면 코드 수정 시 computed안의 내용만 변경해 주면 되기 때문에 유지보수 및 가독성에도 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'자바스크립트'
},
methods: {},
computed: {
reversedMessage(){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
computed와 methods
methods
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ reversedMessage() }}</div>
<div>{{ reversedMessage() }}</div>
<div>{{ reversedMessage() }}</div>
<div>{{ reversedMessage() }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'자바스크립트'
},
methods: {
reversedMessage(){
return this.message.split('').reverse().join('')
}
},
computed: {
}
})
</script>
</body>
</html>결과화면
computed를 사용했을 때와 동일한 결과화면을 볼 수 있다.
두 속성의 차이점은 computed를 사용하면 캐싱을 하고 methods는 캐싱하지 않는다.
뷰 인스턴스가 처음에 생성될 때 message라는 데이터가 '자바스크립트'라는 값을 가지고 있고,
computed속성이 실행되면서 reversedMessage가 생기게 되고 그 값을 저장해 놨다 다시 사용한다.
반면 methods를 사용할 때는 호출 할 때마나 항상 함수를 실행(렌더링을 다시 할 때마다 항상 함수를 실행)
computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행
즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
<div>{{ reversedMessage }}</div>
<button @click="changeMessage">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'자바스크립트'
},
methods: {
changeMessage(){
this.message = 'riverkim';
},
},
computed: {
reversedMessage(){
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>처음에는 '트립크스바자'가 나온 뒤 클릭을 누르면 computed에서 message의 변경을 감지하고 reversedMessage이 실행
결과화면
Hello!