출처 : https://youtu.be/G9gKCPrCdVo (코지코더), vue.js공식문서
1. 메서드는 캐싱을 하지않고, 컴퓨티드는 캐싱을 함
- 컴퓨티드는 처음에 실행돼서 값을 미리 저장해두고 있고, 메서드는 호출될때마다 실행됨
- 여러번 사용할 경우 컴퓨티드는 처음 계산된 값을 반환해주고, 메서드는 여러번 호출되게됨
- 컴퓨티드 내의 데이터가 바뀌면 다시 계산해서 전체에 값을 반영해줌
<body>
<div id="app">
<button @click="changeMessage">Change</button>
<br>
{{reverseMessage}}<br>
{{reverseMessage}}<br>
{{reverseMessage}}
</div>
<script>
new Vue({
el: "#app",
data: {
message : '수박쥬스'
},
methods : {
changeMessage(){
this.message = '씩씩한조약돌'
}
},
computed: {
reverseMessage(){
return this.message.split('').reverse().join('');
}
}
});
</script>
</body>
씩씩하게 공부중 (22.11~)