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

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

一、相比普通script語法的優勢

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

• 更少的樣板內容，更簡潔的代碼

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

• 更好的運行時性能 (其模板會被編譯成與其同一作用域的渲染函數，沒有任何的中間代理)。

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

二、基本語法

要使用這個語法，需要將 setup attribute 添加到 <script> 代碼塊上

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

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

頂層的綁定會被暴露給模板

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

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

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

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

import 導入的內容也會以同樣的方式暴露。意味著可以在模板表達式中直接使用導入的 helper 函數，并不需要通過 methods 選項來暴露它：

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

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

三、響應式

響應式狀態需要明確使用響應式 APIs 來創建。和從 setup() 函數中返回值一樣，ref 值在模板中使用的時候會自動解包：

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

const count = ref(0)
</script>

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

四、使用組件

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

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

<template>
  <MyComponent />
</template>

動態組件

由于組件被引用為變量而不是作為字符串鍵來注冊的，在 <script setup> 中要使用動態組件的時候，就應該使用動態的:is來綁定

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

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

遞歸組件

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

• 請注意這種方式相比于 import 導入的組件優先級更低。如果有命名的 import 導入和組件的推斷名沖突了，可以使用 import 別名導入：

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

命名空間組件

• 可以使用帶點的組件標記，例如 <Foo.Bar>來引用嵌套在對象屬性中的組件。這在需要從單個文件中導入多個組件的時候非常有用：

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

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

五、使用自定義指令

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

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

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

<script setup>
  // 導入的指令同樣能夠工作，并且能夠通過重命名來使其符合命名規范
  import { myDirective as vMyDirective } from './MyDirective.js'
</script>

六、defineProps 和 defineEmits

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

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

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

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

• defineProps 接收與 props 選項相同的值，defineEmits 也接收 emits 選項相同的值

• defineProps 和 defineEmits 在選項傳入后，會提供恰當的類型推斷

• 傳入到 defineProps 和 defineEmits 的選項會從 setup 中提升到模塊的范圍。因此，傳入的選項不能引用在 setup 范圍中聲明的局部變量。這樣做會引起編譯錯誤。但是，它可以引用導入的綁定，因為它們也在模塊范圍內

七、defineExpose

• 使用 <script setup> 的組件是默認關閉的，也即通過模板 ref 或者 $parent 鏈獲取到的組件的公開實例，不會暴露任何在 <script setup> 中聲明的綁定。

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

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

const a = 1
const b = ref(2)

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

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

八、useSlots 和 useAttrs

• 在 <script setup> 使用 slots 和 attrs 的情況應該是很罕見的，因為可以在模板中通過 $slots 和 $attrs 來訪問它們。在你的確需要使用它們的罕見場景中，可以分別用 useSlots 和 useAttrs 兩個輔助函數

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

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

• useSlots 和 useAttrs 是真實的運行時函數，它會返回與 setupContext.slots 和 setupContext.attrs 等價的值，同樣也能在普通的組合式 API 中使用。

九、頂層 await

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

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

• 另外，await 的表達式會自動編譯成在 await 之后保留當前組件實例上下文的格式

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

附：<script setup>和 <script>之間的主要區別

• 性能
  <script setup>具有更好的運行時性能，因為它將模板編譯為具有相同作用域且沒有中間代理的呈現方法。<script>使用中間代理編譯模板。

• 代碼語法
  在<script>塊中，我們需要導出帶有樣板代碼的模塊。<script setup>允許我們定義組件，而無需導出任何內容。在<script setup>塊中，我們可以使用更少的樣板文件獲得更簡潔的代碼。

• 執行流程
  <script>塊在我們首次導入組件時執行。<script setup>塊將在每次創建組件實例時執行。

• 組織代碼
  我們可以根據<script setup>塊中的業務邏輯來組織代碼。使用<script>塊是不可能的，因為我們必須遵循Vue的選項API或組合API的編碼結構。

讀到這里，這篇“vue3中單文件組件<script setup>怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。