vue3中單檔案元件<script setup>範例詳解

2022-07-24 18:00:38

一、相比普通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>
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>
  <h1 v-my-directive>This is a Heading</h1>
</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>
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的編碼結構。