[Vue3] optionsAPI 와 compositionAPI

• ref 반응형 변수
• setup() {}
• createApp
• 순수JS

 

▶  OptionAPI는 data(), methods, computed 등 옵션으로 나눠서 데이터 저장소라 생각하면서 코딩했다.

 

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어
  // `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 헨들러로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의
  // 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

 

▶ Vue3에서는 이런식으로 쓴다고 한다.

<script setup> 방식 = SFC 안에서 컴포넌트를 간편하게 생성하는 현대식 방법

 

setup() 함수를 생략한 상태에서 바로 변수나 함수 선언이 가능하다고 한다.

 

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

// 반응적인 상태의 속성
const count = ref(0)

// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
  count.value++
}

// 생명 주기 훅
onMounted(() => {
  console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

 

---

 

함수를 조합(Composition)하듯이 코드를 구성한다고 해서 "Composition API"라고 부른다고 하는데요 .....

어제 코딩애플님 Vue강의 참고해서 만든 부동산 홈페이지는 OptionAPI 였다니...

 

어쨌든 setup() 이 API 방식으로 선언한다는 것은~ 기존 옵션 기반이 아닌 Vue의 Composition API 문법으로 선언한다 의미

 

---

 

- Vue 홈페이지 ex)

 

아래 예제는 createApp() 방식으로 Vue를 손수 조립해서 만드는 수작업 방식. 하나의 진입점용

setup() 함수 안에 모든 걸 넣어서 실행 

 

* createApp : Vue 애플리케이션을 생성하는 함수. Vue 앱 전체를 생성하는 함수. Vue 앱을 시작할 때 사용하는 기본 함수

                     => 보통 main.js 나 main.ts 에서 사용

 

 

* ref : 반응형 변수(데이터)를 만들 때 사용하는 Vue 함수

      = 값이 바뀔 때 자동으로 화면(UI)이 갱신되는 변수

 

또한 !! ref 로 만든 변수는 값에 접근할 때 .value 로 해야한다. 그냥 변수명++; 은 에러 !

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

 

 

● createApp { }

 : 중괄호 안에는 이 앱의 기능들(옵션)이 들어간다.

 

●  setup() { }

 : Composition API의 핵심 함수. 컴포넌트가 시작될 때 실행되는 부분.  여기에 데이터, 함수 등을 정의하고 Vue에 넘겨준다.

 

●  return { count: ref(0) }

: count라는 반응형 변수를 만들어서 Vue에 넘겨준다.

ref(0)은 count 라는 값을 0으로 시작하는 반응형 변수로 만든다는 뜻이다. count라는 숫자가 있지만, 값이 변하면 화면도 자동으로 갱신된다.

 

●  .mount('#app)

: 위에 만든 Vue App을 #app 요소에 연결 = Vue가 이 DOM을 관리하게 되는 시점이다

 

 

그리고 html에

<div id="app">
  <button @click="count++">+</button>
  <p>{{ count }}</p>
</div>

 

결과

 

 

 

---

참고로 예전에 배운 순수 JS로는 이렇게 짰다. 값이 변경되면 직접 다시 넣어줘야 했다.

<div id="app">
  <button onclick="increase()">+</button>
  <p id="count">0</p>
</div>

<script>
  let count = 0;

  function increase() {
    count++;
    document.getElementById('count').textContent = count;
  }
</script>