前沿

Vue3.0的版本已經推出來有一段時間了，我們在很多的項目中已經使用過它，相比于Vue2.0的版本，Vue3.0保留了選項式的api，同時還提供了最新的組合式Api來幫助我們開發項目，那為什么要推出組合式的Api呢?

舉個例子，如果我們的某一個頁面比較復雜，比如類似taobao的首頁，用選項式的Api來開發，這個頁面有非常多的組件，但是所有的組件響應式數據你都得放在data里，方法放在methods里，然后會在同一個生命周期函數里處理每一個組件的邏輯，這樣我們開發人員在開發這個頁面時，當前vue文件可能會比較長，如果只是修改一個組件的功能，我們需要不停的上下翻動Vue文件來完成修改

選項式Api，vue文件變的很長

如果我們用組合式的Api的話就能很好的解決上面的這個問題，組合式Api可以把一個組件需要用到的響應式數據、方法、生命周期函數放一個setup中，然后通過return的方式暴露給主頁使用就行了，這樣就能做到功能的很好復用

組合式Api，單個組件功能分離

使用教程

好了，前面講了一堆推薦使用組合式Api的理由和好處，我們現在就來講講這個setup的使用方式

我們實際項目一般都是通過腳手架工具去生成項目的，比如Vue3推薦使用Vite，開發的話通過單文件組件(SFC)的方式，就像下面的截圖一樣，template是模板、script里寫js邏輯，style里寫樣式

SFC開發

今天我們重點就來講這個<script setup>

1、要使用這個語法，需要將 setup 屬性 添加到<script>代碼塊上：

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

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

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

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

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

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

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

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

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

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

  const count = ref(0)
</script>

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

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

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

<template>
  <MyComponent />
</template>

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

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

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

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

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

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

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

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

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

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

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

好了，Vue3.2的script setup就介紹到這了