Vue computed?
- 특정 데이터의 변경사항을 실시간으로 처리해준다.
- setter와 getter를 이용하여 자동으로 this 컨텍스트를 Vue인스턴스에 바인딩 해준다.
- 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용한다.
1.computed 사용한 경우
reversedMsg가 총 3번 호출되었음에도 불구하고 console창에 한번만 출력이 된 것을 확인할 수 있다.
2.method사용한 경우
reversedMsg가 3번 호출 되어진 만큼 console 창에도 3번 호출된 것을 확인할 수 있다.
computed 속성은 뷰 인스턴스가 생성될 때, data의 msg값을 받아 reversedMsg를 계산하여 저장해 놓는다.
반면 method 속성은 reversedMsg()를 사용하려고 할 때마다 계산한다.
더보기
-computed
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<h3>원본 메세지 : {{msg}}</h3>
<h4>reversedMsg1 : {{reversedMsg}}</h4>
<h4>reversedMsg2 : {{reversedMsg}}</h4>
<h4>reversedMsg3 : {{reversedMsg}}</h4>
</div>
</body>
<script>
var test = new Vue({
el : '#app',
data :{
msg :'메세지 테스트',
},
computed :{
reversedMsg : function(){
console.log("computed");
return this.msg.split('').reverse().join('');
},
},
});
</script>
</html>
-method
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<h3>원본 메세지 : {{msg}}</h3>
<h4>reversedMsg1 : {{reversedMsg()}}</h4>
<h4>reversedMsg2 : {{reversedMsg()}}</h4>
<h4>reversedMsg3 : {{reversedMsg()}}</h4>
</div>
<script>
var test = new Vue({
el : '#app',
data :{
msg :'메세지 테스트',
},
methods: {
reversedMsg : function(){
console.log('computed');
return this.msg.split('').reverse().join('');
},
},
});
</script>
</body>
</html>
'Web > Vue.js' 카테고리의 다른 글
| v-show 와 v-if 의 차이점 (0) | 2021.05.16 |
|---|---|
| Vue Directives (0) | 2021.05.16 |
| Vue Instance Life Cycle (0) | 2021.05.16 |
| Vue Instance 생성하기 (0) | 2021.05.16 |
| Vue.js 관련 vscode Extension 추천 (0) | 2021.05.10 |
