setup()

setup()
Vue 3에서는 컴포넌트 객체에 setup 함수를 사용할 수 있다.
ref를 사용해서 반응형 변수로 data를 보통의 자바스크립트 함수로 methods를 대체한다.
라이프 사이클 메서드는 onMounted, onUpdated 같은 라이프사이클 훅 함수가 대신한다.
반응형 변수의 변경 탐지 역시 watch 함수로 구현 가능하며 계산된 값을 위한 computed 함수도 제공된다.
컴포넌트 객체에서 속성으로 분리되었던 기능 대부분이 setup 함수 안에서 사용 가능하다.
setup을 사용하는 컴포넌트는 아래와 같은 방식으로 작성한다.

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    name: String
  },
  setup(props) {
    const isSubmited = ref(false);
    const onSubmit = () => {
      isSubmited.value = true;
    }

    onMouted(() => console.log('component mounted'));

    // template에 전달한다.
    return { 
      isSubmited,
      onSubmit
    }
  }
}
</script>

<template>
  <div>{{ name }} {{ isSubmited ? 'submited' : 'not yet' }}</div>
  <button @click="onSubmit">Submit</button>
</template>

중요한 차이점은 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행된다는 점이다.
즉 컴포넌트 인스턴스에 접근이 필요한 기능은 사용할 수 없다.
즉 setup안에서 this를 통해 컴포넌트 객체의 data, computed, methods에서 선언한 것들에는 접근이 불가능하다.
그리고 인스턴스가 생성된 직후에 호출되는 created메소드에 매칭되는 라이프 사이클 훅도 존재하지 않는다.