setup()

setup 함수는, Vue 3 에서 새로 나온 Composition API 이다.

기존에 data, methods 등으로 흩어져있던것을, 하나의 장소로 모으게 해준다.

template 에서 사용하고자하는 변수, 함수등을 정의한뒤,

객체에 하나씩 골라담아, return 해주면

template 에서 해당 변수와 함수를 접근할수있다.. 

아래의 예제를 보면 이해할수있을것이다.

<!-- App.vue -->

<template>
  
  <div v-text="greet1"></div>
  <div v-text="greet2"></div>
  <div v-text="greet3"></div>
  <div v-text="getGreeting()"></div>
  <div v-text="getRandomFloat()"></div>

</template>

<script>

  export default {

    setup() {

      const greet1 = 'Hello';
      const greet2 = 'World';
      const greet3 = 'Cool!~';

      function getGreeting() {

        return `${greet1} ${greet2} ${greet3}`;

      }

      function getRandomFloat() {

        return Math.random();

      }

      return {greet1, greet2, greet3, getGreeting, getRandomFloat};

    },

  }

</script>

 

출력

---