Vue.js Composition API

1 개요

Composition API

• Reactivity API:.ref(), reactive()
• Lifecycle Hooks: onMounted(), onUnmounted()
• Dependency Injection: provide(), inject()

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

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

2 같이 보기

• Vue.js

3 참고

• https://vuejs.org/guide/extras/composition-api-faq.html