- 아래와 같이 {{}}안에 간단한 연산은 괜찮다.
하지만 연산이 커지면 간단 명료하지않고 복잡하며, 한눈에 잘 들어오지 않는다.
(사실 안에 저렇게 로직이 들어가는건 좋은 코드가 아니라고 한다!)
<!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">
<title>뷰 기초익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{number+1}} <!--이렇게 간단한 연산은 ok. 하지만 아래와 같이 연산이 커지면 간단명료x.-->
{{ message.split('').reverse().join('') }} <!--{{안에는 js문법이 들어갈 수 있다.}}-->
</div>
<script>
new Vue({
el: '#app',
data: {
number: 1,
message: '안녕하세요'
},
})
</script>
</body>
</html>
그래서 아래와 같이,
computed 속성에 함수를 만들어 return을 해서 넣어주자.
똑같은 결과값이 나온다.
<!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">
<title>뷰 기초익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ reversedMessage }} <!--여기에는 '함수명'만 작성-->
</div>
<script>
new Vue({
el: '#app',
data: {
message: '안녕하세요'
},
methods: {
},
computed: {
reversedMessage(){
return this.message.split('').reverse().join('');// 여기에 대신 복잡한 코드 작성
}
}
})
</script>
</body>
</html>
그리고 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">
<title>뷰 기초익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ reversedMessage }}
{{ reversedMessage }}
{{ reversedMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: '안녕하세요'
},
methods: {
},
computed: {
reversedMessage(){
return this.message.split('').reverse().join('');//여기서 한번에 고치면 위 3개 다 적용돼서 중복제거효과.
}
}
})
</script>
</body>
</html>
만약 methods를 이용한다면?
<!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">
<title>뷰 기초익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ reversedMessage() }} <!--methods를 사용할 경우, ()를 붙여줘야한다.-->
{{ reversedMessage() }}
{{ reversedMessage() }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: '안녕하세요'
},
methods: {
reversedMessage(){
return this.message.split('').reverse().join('');
}
},
computed: {
}
}
})
</script>
</body>
</html>
methods와 computed 같은 결과값을 보여주는데 어떤 차이가 있을까?
computed : 캐싱(저장)을 한다.
methods : 캐싱(저장)을 하지 않는다.
즉, 뷰 인스턴스가 생성될 때, message라는 데이터가 '헬로우'라는 값을 가지고 있고, 바로 computed속성을 바로 가진다. 이미 '우로헬'이라는 값이 계산이 되고 저장이 돼있어서 그냥 {{ reversedMessage }}를 사용할때 가져다 쓴다.
반면 methods는 값이 반환되지 않고, 값을 사용하려고 할때 계산하고, 또 계산하고 그래서 3번을 계산.
computed 속성은 처음에 한번만 계산되고, 캐싱된(저장된) 값이 계속 사용되는 것.
만약 message값이 변경된다면, 변경된 것을 캐치해서 다시 계산하면서 다시 적용해서 3군데에 적용된다.
그래서 message가 변경되지 않는 한, 계속 그 값을 가지고 있게된다.
message 변수의 값이 바뀌면, 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">
<title>뷰 기초익히기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="changeMessage">Click</button> <!--2.클릭하면, 클릭 이벤트가 발생하면서, 'changeMessage'함수 실행. message값을 '코지코더'로 바꿔준다.-->
{{ reversedMessage }} <!--1. 처음에 웹브라우저를 열었을때, computed가 reversedMessage 계산. 계산된 값을 가져다 쓴다. '우로헬' -->
{{ reversedMessage }}
{{ reversedMessage }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: '헬로우'
},
methods: {
changeMessage(){
this.message = "코지코더"; }
},
computed: {
reversedMessage(){
return this.message.split('').reverse().join(''); //3. message데이터 변경되면, 바뀐것을 캐치하고 코지코더를 거꾸로 바꿔준다.
}
}
})
</script>
</body>
</html>
Click 버튼 누르면, 이렇게 변경된다.
'Vue.js' 카테고리의 다른 글
| Kossie Coder 08. 클래스 & 스타일 바인딩 (0) | 2022.05.16 |
|---|---|
| Kossie Coder 07. Watch 속성 (0) | 2022.05.15 |
| Kossie Coder 05. 데이터 양방향 바인딩(Data Two Way Binding : v-model) (0) | 2022.05.09 |
| Kossie Coder 04. 이벤트(Events) (0) | 2022.05.09 |
| Kossie Coder 03. 데이터 바인딩(Data Binding) (0) | 2022.04.28 |
