반응형
예제
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue computed</title>
</head>
<body>
<div id="app">
{{reversedMessage}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello World'
},
computed:{
reversedMessage: function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
결과
vuejs에서는 복잡한 연산은 뷰 인스턴스 안에서, html에서는 데이터의 표현만 하는 것을 권고하고 있습니다.
computed 속성은 데이터의 연산을 정의할때 사용할 수 있습니다.
만약 위 코드와 다르게 computed 속성을 사용하지 않는다면 아래와 처럼 표현해야하고 가독성에 좋지 않습니다.
<div id="app">
{{message.split('').reverse().join('')}}
</div>
computed 특징
1. 반응성
data의 값에 따라 자동으로 다시 연산합니다.
2. 캐싱
만약 화면 여러곳에서 연산한 값을 보여줘야한다면 매번 연산하는 것이 아닌, 미리 연산한 값을 가지고 있다가 화면에 결과를 표시합니다.
반응형
'웹 개발' 카테고리의 다른 글
| 파비콘 생성사이트 / favicon-generator.org / favicon generator site (0) | 2024.03.14 |
|---|---|
| [Vue] watch 속성 / 예제 (0) | 2024.03.11 |
| [Vue] 주로 쓰이는 디렉티브 정리 (0) | 2024.03.04 |
| [CSS] flexbox 속성 재밌게 배우기 - [Flexbox Froggy] (1) | 2022.11.19 |
| JavaScript 예약어 모음 (0) | 2022.07.30 |
댓글