728x90
Vue.js Computed 속성 개념 및 예제 설명
Computed 속성을 사용하는 이유
템플릿 내에 표현식을 넣으면 편리하지만 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵기 때문에 아래의 코드같이 복잡한 로직은 반드시 Computed 속성을 사용해야 한다.
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 Conputed 속성</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ reverseMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
실행 결과
Computed 와 Method의 차이점
<div id="app">
{{ reverseMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
})
</script>
<div id="app">
{{ reverseMessage() }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
})
</script>
위의 두 코드는 같은 결과를 얻을 수 있다. 두 방식의 차이점은
1. 캐싱
computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다.
message가 변경되지 않는 한, computed 속성인 reverseMessage를 여러 번 요청해도 계산을 하지 않고 계산되어 있던 결과를 즉시 반환한다.
<div id="app">
{{ reverseMessage }}
{{ reverseMessage }}
{{ reverseMessage }}
</div>
위와 같은 코드가 있을 때,
method는 reverseMessage()를 사용하려고 할 때 마다 계산한다.
※ 위의 코드에서 reverseMessage를 세 번 실행하는 것과 같다.
computed 속성은 Vue 인스턴스가 생성될 때, data의 message값을 받아 reverseMessage를 계산하여 저장해놓는다.
※ 위의 코드에서 reverseMessage를 한 번 실행하는 것과 같다.
만약 아래의 코드처럼 message의 값이 변경되면 변경된 값을 받아와서 다시 계산하여 저장해 놓는다.
<div id="app">
<button @click="changeMessage">Change!</button>
{{ reverseMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
changeMessage() {
this.message = 'Vue Computed 속성'
}
},
computed: {
reverseMessage() {
return this.message.split('').reverse().join('');
}
}
})
</script>
실행 결과
728x90
'개념정리 > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue 클래스와 스타일 바인딩 개념 및 예제 (1) | 2022.04.26 |
|---|---|
| [Vue.js] Vue watch 속성 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue 데이터 양방향 바인딩 개념 및 예제 (0) | 2022.04.26 |
| [Vue.js] Vue 이벤트 개념 및 예제 (0) | 2022.04.26 |
| [Vue.js] Vue 데이터 바인딩 개념 및 예제 (0) | 2022.04.26 |
댓글