태태개발일지 - Vue Computed API

Computed 

기본적으로 Computed를 사용하는 경우는 변수 즉 값이 계속 변하는 수를 변환시킬 때 Computed를 사용하여 이를 처리한다.

 

 

컴퓨티드(computed) API는 컴포지션(Composition API)에서 사용된 컴퓨티드 속성을 의미한다.

 

 

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message + "!!";
    }
  }
}
</script>

 

기본 Computed는 다음과 같이 사용할 수 있다.

 

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // data
    const message = ref('');

    // computed
    const reversedMessage = computed(() => {
      return message.value + "!!"
    });

    return { reversedMessage }
  }
} 
</script>

 

Set up() 을 사용하여 Computed API를 사용한다면 아래와 같이 사용하면 된다.