Vue 3.0 - Compute vs Method 차이

Compute vs Method 차이

아래의 코드를 실행 시키면, reverseMessage는 4번 호출 되지만 comptedMessage는 한번 밖에 호출 되지 않는다.

<template>
  <h1>{{ reverseMessage() }}</h1>
  <h1>{{ reverseMessage() }}</h1>
  <h1>{{ reverseMessage() }}</h1>
  <h1>{{ reverseMessage() }}</h1>

  <h1>{{ computedMessage }}</h1>
  <h1>{{ computedMessage }}</h1>
  <h1>{{ computedMessage }}</h1>
  <h1>{{ computedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Computed!'
    }
  },
  methods: {
    reverseMessage() {
      console.log('이것이 메소드다.')
      return this.msg.split('').reverse().join('')
    }
  },
  computed: {
    // computed는 연산된 data를 관리하는 공간이다.
    // 아래의 computedMessage()는 메소드처럼 선언되었지만
    // data처럼 명시 및 사용됨을 기억하자.
    computedMessage() {
      console.log('이것이 computed 이다.')
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style>
h1 {
  font-size: 50px;
}
</style>

차이점

• methods의 경우 함수를 의미하는 ()붙여서 호출해야한다.
• computed에서는 인자를 넘길 수 없음
• computed에서는 반드시 return값이 있어야 한다.
• update life cycle hook발생시 template에 정의한 method들은 무조건 실행됨