vue 的檔案模式有兩種: .html+.js 及 .vue
而vue 的撰寫方式又有兩種: 選項式 API (Options API) 及 組合式 API (Composition API)
如此不論是現有web 專案是使用html+js 的結構,或是想寫一個base-on vue 的新專案,都有相對應的solution
引用模式
HTML
基於html 檔案,在<script type="module">
區域中寫vue 程式,並引用 vue 提供的 createApp
物件,呼叫mount 將vue 的相關功能掛載到DOM Element 上。
<!-- 用HTML 跟 OptionsAPI -->
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello World!'
}
}
}).mount('#app')
</script>
<div id="app">
<!-- vue物件掛載到#app 上,就可以顯示messgae 的值 -->
<h1>{{ message }}</h1>
</div>
單檔案組件 SFC (Single-File Components)
基於vue 檔案,在 <script>
區域中寫vue 程式,並搭配 <template>
宣告DOM Element 。一個vue 檔可以形成一個獨立的組件,並重複被引用到其他vue 檔中。
<!-- 用SFC 跟 OptionsAPI -->
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<template>
<h1>{{ message }}</h1>
</template>
API 風格
選項式 API (Options API)
使用export default 定義、回傳一個vue 物件。data() 裡面回傳響應式變數。
<!-- 用SFC 跟 OptionsAPI -->
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<p>Count is: {{ count }}</p>
</template>
組合式 API (Composition API)
與OptionsAPI 不同處在於,在HTML 中搭配setup()
,SFC中搭配<script setup>
使用,看起來像在寫一個一般的javascript。響應式變量需要import 並配合 ref
宣告才能使用。可以視為OptionsAPI 的改良,也因為少了一層編譯的關係,效能會比較好。但此方式在script tag 中的內容都是在描述vue 組件的功能。如果有額外的javascript 要寫,則需要採用原生的script 寫法。
<!-- 用SFC 跟 CompositionAPI -->
<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
</script>
<template>
<h1>{{ message }}</h1>
</template>
References:
https://cn.vuejs.org/api/composition-api-setup
https://ithelp.ithome.com.tw/m/articles/10296330