728x90
둘의 차이점
- computed (계산된 속성)
1. 어떤 값을 파생하려고 할 때 유용하다.
2. 기본값이 업데이트될 때마다 값이 자동으로 업데이트 된다.
3. 루프가 변경되지 않아도 다시 계산할 필요가 없는 값을 반복적으로 계산하지 않기 위해 캐싱된다.
4. 매개변수를 받을 수 없다.
- methods (메서드)
1. Vue 인스턴스에 바인딩된 함수
2. 명시적으로 호출될 때만 실행된다.
3. 매개변수를 받을 수 있다.
4. 자바스크립트 함수가 필요한 동일한 상황에서 유용하다.
버튼을 눌러 count를 1씩 올리는 걸 computed와 methods를 쓰는걸 한번 해보자...
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>computed로 count 올리기 {{ computedCount }}</p><button v-on:click="add">add</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 0
},
computed: {
computedCount () {
return this.count + ' 개';
}
},
methods: {
add () {
this.count++
}
}
})
</script>
</body>computed를 쓴 소스
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>computed로 count 올리기 {{ count }}</p><button v-on:click="add">add</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add () {
this.count++;
}
}
})
</script>
</body>
methods만 쓴 소스
솔직히 이걸 어떻게 설명을 써야할지 잘 모르겠다...
예시가 적절하지 않은 것 같은데 조금더 공부한 후 수정해보자
반응형
'VueJS' 카테고리의 다른 글
| [VueJS] 컴포넌트 props와 리터럴속성 그리고 검증 (0) | 2021.01.27 |
|---|---|
| [VueJS] Component template requires a root element, rather than just text. (0) | 2021.01.24 |
| [VueJS] v-for (0) | 2021.01.23 |
| [VueJS] v-if, v-else-if, v-else 사용시 알아둘 것 (0) | 2021.01.23 |
| [VueJS] v-model, v-once (0) | 2021.01.21 |