API 樣式 vue 教學

Home >> Blog >> API 樣式 vue 教學

API 樣式 vue 教學

Vue 組件可以用兩種不同的 API 風格編寫：Options API和Composition API。

選項 API

使用 Options API，我們使用選項對象定義組件的邏輯，例如data、methods和mounted。由選項定義的屬性在this內部函數中公開，指向組件實例：

< script >
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},

// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},

// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}

組合 API

使用 Composition API，我們使用導入的 API 函數定義組件的邏輯。在 SFC 中，Composition API 通常與< script setup >. 該setup屬性是使 Vue 執行編譯時轉換的提示，允許我們使用更少樣板的 Composition API。例如，在模板中聲明的導入和頂級變量/函數< script setup >可以直接使用。

這是相同的組件，具有完全相同的模板，但使用的是 Composition API，< script setup >而不是：

< 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 >

選擇哪個？

兩種 API 樣式都完全能夠涵蓋常見的用例。它們是由完全相同的底層系統驅動的不同接口。事實上，Options API 是在 Composition API 之上實現的！兩種風格共享有關 Vue 的基本概念和知識。

Options API 以“組件實例”的概念為中心（this如示例中所示），它通常與來自 OOP 語言背景的用戶的基於類的心理模型更好地對齊。通過抽像出反應性細節並通過選項組強制執行代碼組織，它對初學者也更加友好。

組合 API 的中心是直接在函數範圍內聲明反應狀態變量，並將來自多個函數的狀態組合在一起以處理複雜性。它更加自由，需要了解反應性在 Vue 中的工作原理才能有效使用。作為回報，它的靈活性為組織和重用邏輯提供了更強大的模式。

您可以在Composition API 常見問題解答中了解有關兩種樣式之間的比較以及 Composition API 的潛在優勢的更多信息。

如果您是 Vue 新手，以下是我們的一般建議：

• 出於學習SEO搜尋引擎優化目的或是單純的只想學習Vue，請使用看起來更容易理解的風格。同樣，大多數核心概念在兩種風格之間共享。您以後可以隨時選擇其他樣式。
• 用於生產用途：
• 如果您不使用構建工具，或者計劃主要在低複雜度場景（例如漸進增強）中使用 Vue，請使用 Options API。
• 如果您打算使用 Vue 構建完整的應用程式，請使用組合 API + 單文件組件。

在學習階段，您不必只致力於一種風格。文檔的其餘部分將在適用的情況下提供兩種樣式的代碼示例，您可以隨時使用左側邊欄頂部的API 偏好開關在它們之間切換。