vue3 組合式 api 單文件組件寫法
1 Vue3 組合式 API 的基本原理和理念
1.1 Vue3 中的 Composition API
Vue3 中的 Composition API 是一種新的編寫組件邏輯的方式，它提供了更好的代碼組織、類型推導(dǎo)、測試支持和復(fù)用性。相比于 Vue2 的 Options API，Composition API 更加靈活和可擴展。
在 Composition API 中，我們使用 setup 函數(shù)來定義組件的邏輯部分。setup 函數(shù)是一個特殊的函數(shù)，在創(chuàng)建組件實例之前被調(diào)用，并且接收兩個參數(shù)：props 和 context。props 是傳入組件的屬性集合，而 context 包含了一些與組件關(guān)聯(lián)的方法和數(shù)據(jù)。
1.2 與 Vue2 Options API 的對比
與 Vue2 的 Options API 相比，Composition API 具有以下優(yōu)勢：
更好的代碼組織：通過將相關(guān)邏輯放在同一個函數(shù)內(nèi)部，可以更清晰地組織代碼。
類型推導(dǎo)：由于 setup 函數(shù)是一個普通的 JavaScript 函數(shù)，因此可以更容易地獲得類型推導(dǎo)的支持。
測試支持：由于邏輯被封裝在獨立的函數(shù)中，可以更方便地進行單元測試。
復(fù)用性：可以將邏輯抽象為自定義 Hook，并在多個組件中重用。
1.3 為什么選擇使用組合式 API
使用組合式 API 可以帶來以下好處：
更好的代碼組織：將相關(guān)邏輯放在同一個函數(shù)內(nèi)部，使代碼更易于理解和維護。
更好的類型推導(dǎo)：由于 setup 函數(shù)是一個普通的 JavaScript 函數(shù)，可以獲得更好的類型推導(dǎo)支持，減少錯誤。
更好的測試支持：邏輯被封裝在獨立的函數(shù)中，可以更方便地進行單元測試。
更高的復(fù)用性：可以將邏輯抽象為自定義 Hook，并在多個組件中重用。
使用組合式 API 可以提供更好的開發(fā)體驗和代碼質(zhì)量，使得 Vue3 的開發(fā)更加靈活和可擴展。
2 安裝和配置 Vue3
為了安裝和配置 Vue3，您需要按照以下步驟進行操作：
2.1 引入 Vue3 的最新版本
首先，您需要在項目中引入 Vue3 的最新版本。可以通過使用 npm 或 yarn 來安裝 Vue3。
如果使用 npm，請運行以下命令：
?npm install vue@next
如果使用 yarn，請運行以下命令：
?yarn add vue@next
這將會安裝 Vue3 及其相關(guān)依賴項。
2.2 創(chuàng)建 Vue 應(yīng)用程序的基本配置
一旦您安裝了 Vue3，您可以開始創(chuàng)建 Vue 應(yīng)用程序的基本配置。
在你的項目中創(chuàng)建一個新文件，例如main.js，并添加以下代碼：
?import { createApp } from 'vue';
?import App from './App.vue';
?
?createApp(App).mount('#app');
上述代碼導(dǎo)入了createApp函數(shù)和根組件App，然后調(diào)用createApp函數(shù)創(chuàng)建一個 Vue 應(yīng)用程序?qū)嵗⒏M件傳遞給它。最后，使用mount方法將 Vue 應(yīng)用程序掛載到 HTML 頁面上的元素上（此處假設(shè)有一個 id 為app的元素）。
接下來，在您的項目中創(chuàng)建一個名為App.vue的文件，并添加以下代碼作為根組件的模板：
?<template>
? ?<div id="app">
? ? ?<!-- Your application content here -->
? ?</div>
?</template>
?
?<script>
?export default {
? ?// Your component options here
?}
?</script>
?
?<style>
?/* Your component styles here */
?</style>
在上述代碼中，您可以將應(yīng)用程序的內(nèi)容放置在<div id="app">元素內(nèi)部。
3 創(chuàng)建一個簡單的單文件組件
3.1 創(chuàng)建一個.vue 文件
首先，在您的項目中創(chuàng)建一個新的.vue文件，例如MyComponent.vue。
3.2 編寫組件模板
在MyComponent.vue文件中，編寫組件的模板。模板部分定義了組件的結(jié)構(gòu)和布局。以下是一個示例：
?<template>
? ?<div>
? ? ?<h1>{{ message }}</h1>
? ? ?<button @click="increment">Increment</button>
? ?</div>
?</template>
上述代碼展示了一個包含標(biāo)題和按鈕的簡單組件。標(biāo)題使用雙花括號插值綁定到message變量，按鈕使用@click指令綁定到increment方法。
3.3 實現(xiàn)組件的組合式 API 邏輯
3.3.1 重構(gòu)原有代碼
接下來，您需要將原有的邏輯重構(gòu)為組合式 API 形式。在MyComponent.vue文件中，添加如下代碼：
?<script>
?import { ref } from 'vue';
?
?export default {
? ?setup() {
? ? ?const message = ref('Hello, Vue!');
? ? ?
? ? ?function increment() {
? ? ? ?message.value += '!';
? ? ?}
? ? ?
? ? ?return {
? ? ? ?message,
? ? ? ?increment
? ? ?};
? ?}
?}
?</script>
上述代碼使用setup函數(shù)來實現(xiàn)組合式 API 的邏輯。在setup函數(shù)內(nèi)部，我們使用ref函數(shù)創(chuàng)建了一個響應(yīng)式數(shù)據(jù)message，并定義了一個名為increment的方法。
最后，通過return語句將需要在模板中使用的數(shù)據(jù)和方法導(dǎo)出。
3.3.2 創(chuàng)建和導(dǎo)出可復(fù)用的邏輯函數(shù)
如果您希望將某些邏輯代碼抽離成可復(fù)用的函數(shù)，可以創(chuàng)建并導(dǎo)出它們。例如，在同一個文件中添加以下代碼：
?<script>
?import { ref } from 'vue';
?
?function useCounter() {
? ?const count = ref(0);
?
? ?function increment() {
? ? ?count.value++;
? ?}
?
? ?return {
? ? ?count,
? ? ?increment
? ?};
?}
?
?export default {
? ?setup() {
? ? ?const { count, increment } = useCounter();
?
? ? ?return {
? ? ? ?count,
? ? ? ?increment
? ? ?};
? ?}
?}
?</script>
上述代碼創(chuàng)建了一個名為useCounter的可復(fù)用邏輯函數(shù)，該函數(shù)返回一個包含計數(shù)器值和增加計數(shù)器的方法的對象。
然后，在setup函數(shù)內(nèi)部，我們調(diào)用useCounter函數(shù)，并將其返回值解構(gòu)為count和increment變量。
最后，通過return語句將這些變量導(dǎo)出供模板使用。
3.4 在應(yīng)用程序中使用組件
要在 Vue3 應(yīng)用程序中使用組件，您需要按照以下步驟進行操作：
創(chuàng)建一個組件：首先，創(chuàng)建一個.vue 文件來定義您的組件。該文件包含模板、樣式和邏輯代碼。例如，創(chuàng)建一個名為"HelloWorld.vue"的文件。
?<template>
? ?<div>
? ? ?<h1></h1>
? ?</div>
?</template>
?
?<script>
?export default {
? ?data() {
? ? ?return {
? ? ? ?greeting: 'Hello, World!'
? ? ?}
? ?}
?}
?</script>
?
?<style scoped>
?h1 {
? ?color: blue;
?}
?</style>
導(dǎo)入并注冊組件：在您的主應(yīng)用程序文件（通常是 main.js）中，導(dǎo)入并全局注冊您的組件。
import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const app = createApp()
app.component('hello-world', HelloWorld)
app.mount('#app')
在應(yīng)用程序中使用組件：現(xiàn)在，您可以在應(yīng)用程序的模板中使用您的組件了。只需將組件名稱作為自定義元素添加到模板中即可。
<div id="app">
?<hello-world></hello-world>
</div>
這樣，您的組件就會在應(yīng)用程序中顯示出來，并且它的數(shù)據(jù)和邏輯也會生效。
請注意，在上述示例中，我們使用了單文件組件的形式編寫組件。這是 Vue 推薦的方式，它將組件的模板、樣式和邏輯封裝在一個文件中，使代碼更加模塊化和可維護。
4 使用 Vue3 組合式 API 的常見模式和技巧
當(dāng)使用 Vue3 的組合式 API 時，有一些常見的模式和技巧可以幫助您更好地組織和管理代碼。
4.1 響應(yīng)式狀態(tài)管理
在 Vue3 中，可以使用ref和reactive函數(shù)來創(chuàng)建響應(yīng)式狀態(tài)。ref用于創(chuàng)建單個值的響應(yīng)式引用，而reactive用于創(chuàng)建包含多個屬性的響應(yīng)式對象。
import { ref, reactive } from 'vue'
// 創(chuàng)建一個響應(yīng)式引用
const count = ref(0)
// 創(chuàng)建一個響應(yīng)式對象
const state = reactive({
?message: 'Hello',
?name: 'World'
})
然后，你可以在組件中使用這些響應(yīng)式狀態(tài)：
export default {
?setup() {
? ?// 使用響應(yīng)式引用
? ?const counter = ref(0)
? ?
? ?// 使用響應(yīng)式對象
? ?const data = reactive({
? ? ?message: 'Hello',
? ? ?name: 'World'
? ?})
? ?return {
? ? ?counter,
? ? ?data
? ?}
?}
}
注意，在使用響應(yīng)式狀態(tài)時，需要使用.value來訪問ref類型的數(shù)據(jù)：
<template>
?<div>
? ?<p>Counter: {{ counter }}</p>
? ?<p>Message: {{ data.message }}</p>
? ?<p>Name: {{ data.name }}</p>
?</div>
</template>
<script>
export default {
?setup() {
? ?const counter = ref(0)
? ?const data = reactive({
? ? ?message: 'Hello',
? ? ?name: 'World'
? ?})
? ?return {
? ? ?counter,
? ? ?data
? ?}
?}
}
</script>
4.2 生命周期鉤子函數(shù)的替代方法
在 Vue3 中，生命周期鉤子函數(shù)被替換為了setup函數(shù)。你可以在setup函數(shù)中執(zhí)行組件初始化的邏輯，并返回要暴露給模板的數(shù)據(jù)和方法。
export default {
?setup() {
? ?// 組件初始化邏輯
? ?
? ?return {
? ? ?// 要暴露給模板的數(shù)據(jù)和方法
? ?}
?}
}
如果需要在組件掛載后或卸載前執(zhí)行一些操作，可以使用onMounted和onUnmounted鉤子函數(shù)：
import { onMounted, onUnmounted } from 'vue'
export default {
?setup() {
? ?onMounted(() => {
? ? ?// 組件掛載后執(zhí)行的操作
? ?})
? ?onUnmounted(() => {
? ? ?// 組件卸載前執(zhí)行的操作
? ?})
? ?return {}
?}
}
4.3 針對特定功能的自定義組合式 API
除了使用 Vue 提供的內(nèi)置組合式 API 之外，你還可以創(chuàng)建自己的自定義組合式 API 來封裝特定功能的邏輯。
例如，假設(shè)你想要創(chuàng)建一個可復(fù)用的計時器邏輯，你可以編寫一個名為"useTimer"的自定義組合式 API：
import { ref, watch, onUnmounted } from 'vue'
export function useTimer(initialValue = 0) {
?const timer = ref(initialValue)
?const startTimer = () => {
? ?timer.value = 0
? ?const interval = setInterval(() => {
? ? ?timer.value++
? ?}, 1000)
? ?onUnmounted(() => {
? ? ?clearInterval(interval)
? ?})
?}
?watch(timer, (newValue) => {
? ?console.log('Timer:', newValue)
?})
?return {
? ?timer,
? ?startTimer
?}
}
然后，在你的組件中使用自定義組合式 API：
import { useTimer } from './useTimer'
export default {
?setup() {
? ?const { timer, startTimer } = useTimer()
? ?return {
? ? ?timer,
? ? ?startTimer
? ?}
?}
}
這樣，你就可以在多個組件中重復(fù)使用計時器邏輯。
4.4 使用 ref 和 reactive 進行數(shù)據(jù)響應(yīng)式處理
在 Vue3 中，我們可以使用ref和reactive函數(shù)來創(chuàng)建響應(yīng)式的引用和對象。
使用
ref函數(shù)創(chuàng)建響應(yīng)式引用：
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 輸出：0
count.value++ // 修改值
console.log(count.value) // 輸出：1
使用
reactive函數(shù)創(chuàng)建響應(yīng)式對象：
import { reactive } from 'vue'
const state = reactive({
?count: 0,
?name: 'John'
})
console.log(state.count) // 輸出：0
console.log(state.name) // 輸出：'John'
state.count++ // 修改值
console.log(state.count) // 輸出：1
4.5 使用 watchEffect 和 watch 進行數(shù)據(jù)偵聽
Vue3 提供了watchEffect和watch函數(shù)來進行數(shù)據(jù)偵聽。
使用
watchEffect監(jiān)聽響應(yīng)式狀態(tài)的變化，并執(zhí)行回調(diào)函數(shù)：
import { watchEffect, reactive } from 'vue'
const state = reactive({
?count: 0
})
watchEffect(() => {
?console.log('Count changed:', state.count)
})
使用
watch函數(shù)監(jiān)聽特定的響應(yīng)式狀態(tài)，并執(zhí)行回調(diào)函數(shù)：
import { watch, reactive } from 'vue'
const state = reactive({
?count: 0
})
watch(
?() => state.count,
?(newVal, oldVal) => {
? ?console.log('Count changed:', newVal, oldVal)
?}
)
4.6 使用 offer 和 inject 實現(xiàn)組件之間的通信
Vue3 中，我們可以使用provide和inject來實現(xiàn)組件之間的通信。
在父組件中使用
provide提供數(shù)據(jù)：
import { provide, reactive } from 'vue'
const state = reactive({
?count: 0
})
provide('state', state)
在子組件中使用
inject獲取提供的數(shù)據(jù)：
import { inject } from 'vue'
export default {
?setup() {
? ?const state = inject('state')
? ?console.log(state.count) // 輸出：0
? ?return {}
?}
}
通過這些技巧，你可以更好地利用 Vue3 的組合式 API 來處理數(shù)據(jù)響應(yīng)性、數(shù)據(jù)偵聽以及組件之間的通信。
5 總結(jié)
Vue3 的組合式 API 和單文件組件為我們帶來了更加靈活、可維護的開發(fā)方式。通過組合式 API，我們能夠更好地組織組件的邏輯，并且可以輕松地復(fù)用和共享代碼邏輯。而單文件組件則將模板、樣式和邏輯集成在一個文件中，簡化了開發(fā)流程，提高了代碼的可讀性和可維護性。
在本文中，我們從頭到尾介紹了如何使用 Vue3 的組合式 API 和單文件組件來構(gòu)建應(yīng)用程序。我們學(xué)習(xí)了如何安裝和配置 Vue3，并且詳細(xì)講解了創(chuàng)建單文件組件的步驟。此外，我們還探討了一些常見的組合式 API 模式和技巧，如響應(yīng)式狀態(tài)管理、替代生命周期鉤子函數(shù)的方法以及組件之間的通信。
通過深入學(xué)習(xí)和實踐這些概念和技術(shù)，你可以提升自己在 Vue 開發(fā)中的技能水平。無論你是新手還是有經(jīng)驗的開發(fā)者，Vue3 的組合式 API 和單文件組件都將為你帶來更好的開發(fā)體驗和更高的效率。
