Nuxt 3 的Composition API 核心用法包括：1. definePageMeta 用於定義頁(yè)面元信息，如標(biāo)題、佈局和中間件，需在
Nuxt 3 的Composition API 是構(gòu)建現(xiàn)代、可複用和更易維護(hù)的Vue 應(yīng)用的關(guān)鍵工具。它讓你能在.vue文件的<script setup></script>中以更靈活的方式組織邏輯，尤其適合在服務(wù)端渲染（SSR）和靜態(tài)生成（SSG）場(chǎng)景下使用。下面我們就來(lái)拆解Nuxt 3 中Composition API 的核心用法和關(guān)鍵概念。
1. definePageMeta ：定義頁(yè)面元信息
在Nuxt 3 中，你可以使用definePageMeta來(lái)設(shè)置頁(yè)面的路由元數(shù)據(jù)，比如標(biāo)題、中間件、佈局等。
// pages/about.vue
<script setup>
definePageMeta({
title: '關(guān)於我們',
layout: 'custom',
middleware: 'auth'
})
</script>這個(gè)宏會(huì)在構(gòu)建時(shí)被靜態(tài)分析，因此不能放在條件語(yǔ)句中。它替代了以前在setup()裡返回meta的方式，更簡(jiǎn)潔高效。
注意：
definePageMeta不會(huì)自動(dòng)設(shè)置<head>標(biāo)籤，你需要配合useHead來(lái)動(dòng)態(tài)控制頁(yè)面頭部。
2. useHead ：管理頁(yè)面頭部標(biāo)籤
useHead是Composition API 中用於設(shè)置<head>內(nèi)容的核心函數(shù)，支持響應(yīng)式更新。
<script setup>
import { useHead } from '#head'
useHead({
title: '我的頁(yè)面',
meta: [
{ name: 'description', content: '這是一個(gè)很棒的Nuxt 3 頁(yè)面' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/page' }
]
})
</script>你也可以傳入一個(gè)響應(yīng)式對(duì)象，實(shí)現(xiàn)動(dòng)態(tài)更新：
const title = ref('加載中...')
useHead(() => ({
title: title.value
}))
// 模擬異步加載setTimeout(() => {
title.value = '內(nèi)容已加載'
}, 1000) 3. useAsyncData ：處理異步數(shù)據(jù)獲取
這是Nuxt 3 中最常用的組合式函數(shù)之一，用於在服務(wù)端或客戶端安全地獲取數(shù)據(jù)，並自動(dòng)處理loading、error 狀態(tài)。
<script setup>
const { data, pending, error } = await useAsyncData('user', () =>
$fetch('/api/user')
)
</script>-
data：響應(yīng)式數(shù)據(jù) pending：布爾值，表示請(qǐng)求是否在進(jìn)行中error：如果有錯(cuò)誤，會(huì)包含錯(cuò)誤信息
你還可以控制數(shù)據(jù)獲取的時(shí)機(jī)：
// 只在客戶端獲取const { data } = await useAsyncData('client-only', () => $fetch('/api/data'), {
server: false
})
// 混合模式：服務(wù)端獲取一部分，客戶端再刷新const { data } = await useAsyncData('refresh-on-mount', () => getStats(), {
immediate: false,
transform: (result) => result.stats
}) 4. useFetch ：簡(jiǎn)化API 請(qǐng)求
useFetch是對(duì)useAsyncData $fetch的封裝，能自動(dòng)推斷請(qǐng)求key，並避免重複請(qǐng)求。
<script setup>
const { data, pending } = await useFetch('/api/posts')
</script>它會(huì)根據(jù)請(qǐng)求URL 自動(dòng)生成key，比如/api/posts → useFetch(/api/posts) 。你也可以手動(dòng)指定key：
const { data } = await useFetch('/api/user', { key: 'user-profile' })還支持POST 請(qǐng)求：
const { data } = await useFetch('/api/submit', {
method: 'POST',
body: { name: 'John' }
})注意：
useFetch默認(rèn)只支持JSON 請(qǐng)求。非JSON 響應(yīng)需使用$fetch手動(dòng)處理。
5. useState ：跨組件共享狀態(tài)
useState用於創(chuàng)建全局可響應(yīng)的狀態(tài)，支持服務(wù)端同步。
// 定義狀態(tài)const counter = useState('counter', () => 0) // 使用counter.value // 多個(gè)組件中引用同一個(gè)state const sameCounter = useState('counter') // 值相同
這個(gè)狀態(tài)在服務(wù)端渲染時(shí)是隔離的（每個(gè)請(qǐng)求獨(dú)立），但在客戶端會(huì)持久化。適合存儲(chǔ)用戶偏好、主題、購(gòu)物車等輕量全局狀態(tài)。
6. useCookie ：管理Cookie 狀態(tài)
如果你想讓狀態(tài)持久化並支持服務(wù)端訪問(wèn)Cookie，可以用useCookie 。
const theme = useCookie('theme', { default: () => 'light' })
if (theme.value === 'dark') {
theme.value = 'light'
}它會(huì)自動(dòng)在服務(wù)端讀取Cookie，在客戶端寫(xiě)入Cookie，非常適合主題切換、語(yǔ)言選擇等場(chǎng)景。
7. onMounted 、 ref 、 computed等Vue 原生API
Composition API 也完全支持Vue 3 的標(biāo)準(zhǔn)響應(yīng)式API：
<script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
onMounted(() => {
console.log('組件已掛載')
})
</script>這些和你在普通Vue 項(xiàng)目中使用的完全一致，但在Nuxt 3 中需注意SSR 上下文限制（例如onMounted只在客戶端執(zhí)行）。
基本上就這些核心用法。 Nuxt 3 的Composition API 讓你能在更簡(jiǎn)潔的語(yǔ)法下完成數(shù)據(jù)獲取、狀態(tài)管理、SEO 優(yōu)化等任務(wù)，特別適合構(gòu)建高性能的SSR/SSG 應(yīng)用。關(guān)鍵是理解useAsyncData 、 useFetch和useState的使用場(chǎng)景，再配合useHead和definePageMeta ，就能寫(xiě)出既優(yōu)雅又高效的代碼。
以上是NUXT 3組成API解釋了的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Stock Market GPT
人工智慧支援投資研究，做出更明智的決策
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
JavaScript實(shí)現(xiàn)點(diǎn)擊圖片切換效果：專業(yè)教程
Sep 18, 2025 pm 01:03 PM
本文將介紹如何使用JavaScript實(shí)現(xiàn)點(diǎn)擊圖片切換的效果。核心思路是利用HTML5的data-*屬性存儲(chǔ)備用圖片路徑，並通過(guò)JavaScript監(jiān)聽(tīng)點(diǎn)擊事件，動(dòng)態(tài)切換src屬性，從而實(shí)現(xiàn)圖片切換。本文將提供詳細(xì)的代碼示例和解釋，幫助你理解和掌握這種常用的交互效果。
如何使用JavaScript中的GeOlocation API獲取用戶的位置？
Sep 21, 2025 am 06:19 AM
首先檢查瀏覽器是否支持GeolocationAPI，若支持則調(diào)用getCurrentPosition()獲取用戶當(dāng)前位置坐標(biāo)，並通過(guò)成功回調(diào)獲取緯度和經(jīng)度值，同時(shí)提供錯(cuò)誤回調(diào)處理權(quán)限被拒、位置不可用或超時(shí)等異常，還可傳入配置選項(xiàng)以啟用高精度、設(shè)置超時(shí)時(shí)間和緩存有效期，整個(gè)過(guò)程需用戶授權(quán)並做好相應(yīng)錯(cuò)誤處理。
NUXT 3組成API解釋了
Sep 20, 2025 am 03:00 AM
Nuxt3的CompositionAPI核心用法包括：1.definePageMeta用於定義頁(yè)面元信息，如標(biāo)題、佈局和中間件，需在中直接調(diào)用，不可置於條件語(yǔ)句中；2.useHead用於管理頁(yè)面頭部標(biāo)籤，支持靜態(tài)和響應(yīng)式更新，需與definePageMeta配合實(shí)現(xiàn)SEO優(yōu)化；3.useAsyncData用於安全地獲取異步數(shù)據(jù)，自動(dòng)處理loading和error狀態(tài)，支持服務(wù)端和客戶端數(shù)據(jù)獲取控制；4.useFetch是useAsyncData與$fetch的封裝，自動(dòng)推斷請(qǐng)求key，避免重複請(qǐng)
如何在JavaScript中使用setInterval創(chuàng)建重複間隔
Sep 21, 2025 am 05:31 AM
要?jiǎng)?chuàng)建JavaScript中的重複間隔，需使用setInterval()函數(shù)，它會(huì)以指定毫秒數(shù)為間隔重複執(zhí)行函數(shù)或代碼塊，例如setInterval(()=>{console.log("每2秒執(zhí)行一次");},2000)會(huì)每隔2秒輸出一次消息，直到通過(guò)clearInterval(intervalId)清除，實(shí)際應(yīng)用中可用於更新時(shí)鐘、輪詢服務(wù)器等場(chǎng)景，但需注意最小延遲限制、函數(shù)執(zhí)行時(shí)間影響，並在不再需要時(shí)及時(shí)清除間隔以避免內(nèi)存洩漏，特別是在組件卸載或頁(yè)面關(guān)閉前應(yīng)清理，確保
如何將文本複製到JavaScript中的剪貼板？
Sep 18, 2025 am 03:50 AM
使用ClipboardAPI的writeText方法可複製文本到剪貼板，需在安全上下文和用戶交互中調(diào)用，支持現(xiàn)代瀏覽器，舊版可用execCommand降級(jí)處理。
如何在JavaScript中創(chuàng)建多行字符串？
Sep 20, 2025 am 06:11 AM
thebestatoreateamulti-linestlinginjavascriptsisisingsistisingtemplatalalswithbacktticks，whatpreserveticks，whatpreservereakeandeexactlyaswrite。
如何在JavaScript中創(chuàng)建和使用立即調(diào)用的函數(shù)表達(dá)式（IIFE）
Sep 21, 2025 am 05:04 AM
Aniife（立即InvokedFunction表達(dá)）IsafunctionThatrunSassoonAsisition定義，createByWrappingAppappingAptappafunctionInparenthensessandMmedImmedImmedInvokingit，whopreventsglobalnamespacepacepallutionpallutionpallutionPollutionPollutionPollutionAndEnablesPrivatesScopethroughCloseconscopethroughClosecome; itiswritten; itiswritten; itiswrittenas（iTiswrittenas;
如何將JSON字符串解析到JavaScript對(duì)像中
Sep 21, 2025 am 05:43 AM
要將JSON字符串解析為JavaScript對(duì)象，應(yīng)使用JSON.parse()方法，它能將有效的JSON字符串轉(zhuǎn)換為對(duì)應(yīng)的JavaScript對(duì)象，支持嵌套對(duì)象和數(shù)組的解析，但對(duì)無(wú)效JSON會(huì)拋出錯(cuò)誤，因此需用try...catch處理異常，同時(shí)可通過(guò)第二個(gè)參數(shù)的reviver函數(shù)在解析時(shí)轉(zhuǎn)換值，如將日期字符串轉(zhuǎn)為Date對(duì)象，從而實(shí)現(xiàn)安全可靠的數(shù)據(jù)轉(zhuǎn)換。
