[Vue.js] methods와 computed의 차이

1. methods

• 함수 호출로 캐싱 X
• FnReversedMessage()를 호출할 때마다 계산되어져 화면에 표출

 

2. computed

• 캐싱 O
• reversedMessage()를 호출할 때 이미 계산되어진 값을 저장해두었다가 가져다 사용
• 만약 message 값이 변경될 경우, 변경되는 시점을 캐치해서 변경한 후 캐시로 저장해둔다.

	<div id="app">
        {{ message.split('').reverse().join('') }} <br>
        {{ FnReversedMessage() }}  <br>
        {{ reversedMessage }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
    	new Vue({
        	el: '#app',
          data: {
            message: '안녕하세요'
          },
          methods: {
            FnReversedMessage() {
            	return this.message.split('').reverse().join('')
            }
          },
          computed: {
            reversedMessage(){
              return this.message.split('').reverse().join('')
            }
          }
        })
    </script>