이 글은 인프런 '캡틴 판교' 님의 강의를 듣고, 개인 공부 목적으로 적는 글입니당,,,
computed란?
사용 목적 및 장점
데이터를 바인딩 하면서 코드의 가독성을 높여준다.
캐시를 사용 할 수 있도록 최적화 되어 있어, 비슷한 속성인 watch 보다 속도가 빠르며, 효율성이 높다.
vue 공식 문서
사용 예시 코드
<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>Document</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 1. 기존 방법은 아래와 같이 사용할 수 있었다. -->
<!-- <p v-bind:class="{{ warning : isError }}">Hello</p> -->
<!-- 하지만 computed를 사용하게 되면 함수로 정의가 가능하고, 함수명을 binding 가능하다. -->
<p v-bind:class="errorTextColor">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#app',
data : {
isError : false
},
//computed는 return 값이 존재해야한다.
computed : {
errorTextColor : function(){
return this.isError ? 'warning' : null;
}
}
});
</script>
</body>설명
- Hello라는 텍스트가 값이 true를 가지면, 색상이 빨간색으로 변하게 한다.
위 코드의 주석을 확인해보면 결국 화면에 뿌려질 때 정의 되는 v-bind:class 속성 값이 computed 에 정의된 함수 명으로 binding 된 것을 확인 할 수 있으며, 따라서 코드의 가독성이 높아진 장점이 있다.
인생은 IT 노가다