vue3中單文件組件<script?setup>怎么使用

本文小編為大家詳細(xì)介紹“vue3中單文件組件<script setup>怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue3中單文件組件<script setup>怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、相比普通script語(yǔ)法的優(yōu)勢(shì)

<script setup>是在單文件組件 (SFC) 中使用組合式 API的編譯時(shí)語(yǔ)法糖。相比于普通的 <script> 語(yǔ)法，它具有更多優(yōu)勢(shì)

• 更少的樣板內(nèi)容，更簡(jiǎn)潔的代碼

• 能夠使用純 Typescript 聲明 props 和拋出事件。

• 更好的運(yùn)行時(shí)性能 (其模板會(huì)被編譯成與其同一作用域的渲染函數(shù)，沒(méi)有任何的中間代理)。

• 更好的 IDE 類(lèi)型推斷性能 (減少語(yǔ)言服務(wù)器從代碼中抽離類(lèi)型的工作)。

二、基本語(yǔ)法

要使用這個(gè)語(yǔ)法，需要將 setup attribute 添加到 <script> 代碼塊上

<script setup>
    console.log('hello script setup')
</script>

里面的代碼會(huì)被編譯成組件 setup() 函數(shù)的內(nèi)容。這意味著與普通的 <script> 只在組件被首次引入的時(shí)候執(zhí)行一次不同，<script setup>中的代碼會(huì)在每次組件實(shí)例被創(chuàng)建的時(shí)候執(zhí)行。

頂層的綁定會(huì)被暴露給模板

當(dāng)使用 <script setup> 的時(shí)候，任何在 <script setup> 聲明的頂層的綁定 (包括變量，函數(shù)聲明，以及 import 引入的內(nèi)容) 都能在模板中直接使用

<script setup>
// 變量
const msg = 'Hello!'

// 函數(shù)
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

import 導(dǎo)入的內(nèi)容也會(huì)以同樣的方式暴露。意味著可以在模板表達(dá)式中直接使用導(dǎo)入的 helper 函數(shù)，并不需要通過(guò) methods 選項(xiàng)來(lái)暴露它：

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

三、響應(yīng)式

響應(yīng)式狀態(tài)需要明確使用響應(yīng)式 APIs 來(lái)創(chuàng)建。和從 setup() 函數(shù)中返回值一樣，ref 值在模板中使用的時(shí)候會(huì)自動(dòng)解包：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

四、使用組件

<script setup>范圍里的值也能被直接作為自定義組件的標(biāo)簽名使用：

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

動(dòng)態(tài)組件

由于組件被引用為變量而不是作為字符串鍵來(lái)注冊(cè)的，在 <script setup> 中要使用動(dòng)態(tài)組件的時(shí)候，就應(yīng)該使用動(dòng)態(tài)的:is來(lái)綁定

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

遞歸組件

• 一個(gè)單文件組件可以通過(guò)它的文件名被其自己所引用。例如：名為 FooBar.vue 的組件可以在其模板中用 <FooBar/> 引用它自己。

• 請(qǐng)注意這種方式相比于 import 導(dǎo)入的組件優(yōu)先級(jí)更低。如果有命名的 import 導(dǎo)入和組件的推斷名沖突了，可以使用 import 別名導(dǎo)入：

import { FooBar as FooBarChild } from './components'

命名空間組件

• 可以使用帶點(diǎn)的組件標(biāo)記，例如 <Foo.Bar>來(lái)引用嵌套在對(duì)象屬性中的組件。這在需要從單個(gè)文件中導(dǎo)入多個(gè)組件的時(shí)候非常有用：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

五、使用自定義指令

• 全局注冊(cè)的自定義指令將以符合預(yù)期的方式工作，且本地注冊(cè)的指令可以直接在模板中使用，就像上文所提及的組件一樣。

• 但這里有一個(gè)需要注意的限制：必須以 vNameOfDirective 的形式來(lái)命名本地自定義指令，以使得它們可以直接在模板中使用

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h2 v-my-directive>This is a Heading</h2>
</template>

<script setup>
  // 導(dǎo)入的指令同樣能夠工作，并且能夠通過(guò)重命名來(lái)使其符合命名規(guī)范
  import { myDirective as vMyDirective } from './MyDirective.js'
</script>

六、defineProps 和 defineEmits

在 <script setup> 中必須使用 defineProps 和 defineEmits API 來(lái)聲明 props 和 emits ，它們具備完整的類(lèi)型推斷并且在 <script setup> 中是直接可用的

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

• defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的編譯器宏。他們不需要導(dǎo)入且會(huì)隨著 <script setup> 處理過(guò)程一同被編譯掉。

• defineProps 接收與 props 選項(xiàng)相同的值，defineEmits 也接收 emits 選項(xiàng)相同的值

• defineProps 和 defineEmits 在選項(xiàng)傳入后，會(huì)提供恰當(dāng)?shù)念?lèi)型推斷

• 傳入到 defineProps 和 defineEmits 的選項(xiàng)會(huì)從 setup 中提升到模塊的范圍。因此，傳入的選項(xiàng)不能引用在 setup 范圍中聲明的局部變量。這樣做會(huì)引起編譯錯(cuò)誤。但是，它可以引用導(dǎo)入的綁定，因?yàn)樗鼈円苍谀K范圍內(nèi)

七、defineExpose

• 使用 <script setup> 的組件是默認(rèn)關(guān)閉的，也即通過(guò)模板 ref 或者 $parent 鏈獲取到的組件的公開(kāi)實(shí)例，不會(huì)暴露任何在 <script setup> 中聲明的綁定。

• 為了在 <script setup> 組件中明確要暴露出去的屬性，使用 defineExpose 編譯器宏

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

• 當(dāng)父組件通過(guò)模板 ref 的方式獲取到當(dāng)前組件的實(shí)例，獲取到的實(shí)例會(huì)像這樣 { a: number, b: number } (ref 會(huì)和在普通實(shí)例中一樣被自動(dòng)解包)

八、useSlots 和 useAttrs

• 在 <script setup> 使用 slots 和 attrs 的情況應(yīng)該是很罕見(jiàn)的，因?yàn)榭梢栽谀０逯型ㄟ^(guò) $slots 和 $attrs 來(lái)訪(fǎng)問(wèn)它們。在你的確需要使用它們的罕見(jiàn)場(chǎng)景中，可以分別用 useSlots 和 useAttrs 兩個(gè)輔助函數(shù)

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

• useSlots 和 useAttrs 是真實(shí)的運(yùn)行時(shí)函數(shù)，它會(huì)返回與 setupContext.slots 和 setupContext.attrs 等價(jià)的值，同樣也能在普通的組合式 API 中使用。

九、頂層 await

<script setup> 中可以使用頂層 await。結(jié)果代碼會(huì)被編譯成 async setup()

<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

• 另外，await 的表達(dá)式會(huì)自動(dòng)編譯成在 await 之后保留當(dāng)前組件實(shí)例上下文的格式

• 注意，async setup() 必須與 Suspense 組合使用，Suspense 目前還是處于實(shí)驗(yàn)階段的特性

附：<script setup>和 <script>之間的主要區(qū)別

• 性能
  <script setup>具有更好的運(yùn)行時(shí)性能，因?yàn)樗鼘⒛０寰幾g為具有相同作用域且沒(méi)有中間代理的呈現(xiàn)方法。<script>使用中間代理編譯模板。

• 代碼語(yǔ)法
  在<script>塊中，我們需要導(dǎo)出帶有樣板代碼的模塊。<script setup>允許我們定義組件，而無(wú)需導(dǎo)出任何內(nèi)容。在<script setup>塊中，我們可以使用更少的樣板文件獲得更簡(jiǎn)潔的代碼。

• 執(zhí)行流程
  <script>塊在我們首次導(dǎo)入組件時(shí)執(zhí)行。<script setup>塊將在每次創(chuàng)建組件實(shí)例時(shí)執(zhí)行。

• 組織代碼
  我們可以根據(jù)<script setup>塊中的業(yè)務(wù)邏輯來(lái)組織代碼。使用<script>塊是不可能的，因?yàn)槲覀儽仨氉裱璙ue的選項(xiàng)API或組合API的編碼結(jié)構(gòu)。

讀到這里，這篇“vue3中單文件組件<script setup>怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。