Vue 3 為 Vue 目前的最新版本，支援 Options API，也支援 Composition API。
Version
Vue 3.3
Vite
$ npm create vue@latest
$ cd vue33-lab
$ npm install
$ npm run dev
使用 Vite 建立 Vue 最新版。
Options API
App.vue
<template>
<button @click="onClick">+</button>
<div>{{ count }}</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
count: 0,
}),
methods: {
onClick() {
this.count++
},
},
}
</script>
- Vue 3.3 支援傳統的 Options API 風格寫法
Composition API
App.vue
<template>
<button @click="onClick">+</button>
<div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue'
let count = ref(0)
let onClick = () => count.value++
</script>
- Vue 3.3 亦支援較新的 Composition API 風格寫法
Conclusion
- Vue 3.3 除了使用 Vite 外，也同時支援 Options API 與 Composition API 兩種寫法