Vue3 인프런 (1) - Setup

Setup()

• setup() 함수(Hook)는 Compostion API 사용을 위한 진입점 역할을 합니다. 그리고 setup함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다.

기본 사용

• 반응형 API ( Reactivity API )를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 <template4>에 노출할 수 있습니다. 반환된 객체의 속성은 구성요소 인스턴스에서도 사용할 수 있습니다.

<script>
import {ref} from "vue";

export default {
  setup() {
    const count = ref(0);
    const message = ref(" Hello Vue3 ");
    const addMessage = () => {
      message.value += "add123";
    }
    return {
      count, message, addMessage
    };
  },
  mounted() {
    console.log(this.count);
  }
}

</script>

<template>
  <h3>{{ message }}</h3>
  <button @click="count++">count : {{ count }}</button>
  <button @click="addMessage">메시지생성</button>
</template>

<style scoped>

</style>