[[401129]]

 如果你最近使用Vite和Vue3工作，你會注意到，在 Vue 組件中會使用這種<srcript>語法。

<script setup> 
import HelloWorld from './components/HelloWorld.vue' 
// 這個模板使用的是Vue3實驗性`<script setup>` SFCs 

你可能會有疑惑三連，“這是什么鬼？這是 Options API ？還是 Composition API？setup方法又在哪里？”

<script setup>類型是Vue的Git RFC中的建議。需要明確的是，這并不是要完全替代任何當前寫法。其目的是為開發(fā)人員提供更簡潔的語法，以編寫其單個文件組件。

在本文中，我們仔細研究它的工作原理以及一些有用的方法。

script setup

在<script setup>中，我們不必聲明export default和setup方法，這種寫法會自動將所有頂級變量聲明公開給模板（template）使用。

在 Composition API 中，我們習(xí)慣創(chuàng)建setup方法，然后返回我們想要公開東西，如下所示：

<script> 
import { ref, computed } from 'vue' 
export default { 
   setup () { 
      const a = ref(3) 
      const b = computed(() => a.value + 2) 
       
      const changeA = () => { a.value = 4 } 
      return { a, b, changeA } // have to return everything!  
   } 
} 
</script> 

如果使用 <script setup> 語法，我們可以用下面的代碼來實現(xiàn)與上面的一樣功能：

<script setup> 
import { ref, computed } from 'vue' 
// all of these are automatically bound to the template 
const a = ref(3) 
const b = computed(() => a.value + 2) 
       
const changeA = () => { a.value = 4 }  
</script> 

不僅是數(shù)據(jù)，計算的屬性和方法，甚至是指令和組件也可以在我們的template中自動獲得。

<template> 
     <component-b /> 
</template> 
<script setup> 
import ComponentB from './components/ComponentB.vue' // really that's it! 
</script> 

這個很魔法。

那么，這有什么意義呢？

長話短說，此語法使單個文件組件更簡單。

用RFC的里的原話來說，“該提案的主要目標是通過將<script setup>的上下文直接暴露給模板來減少SFC內(nèi)部 Composition API 使用的冗長性。”

這就是我們剛剛看到的，無需關(guān)心在setup方法返回的值(因為有時應(yīng)該會忘記在 setup 返回我們需要的值，導(dǎo)致模板獲取不到對應(yīng)的值)，我們可以簡化代碼。

<script setup>的更高級用法

現(xiàn)在我們知道<script setup>到底是什么，以及為什么它有用，接著，我們看一下它的一些更高級的功能。

訪問 props, emit 事件 等
首先，你可能想知道如何執(zhí)行標準的Vue操作，例如：

• 訪問 props
• 怎么發(fā)出自定義事件
• 訪問上下文對象

在Composition API中，這些放在了setup 方法中的參數(shù)

setup (props, context) { 
    // context has attrs, slots, and emit 
} 

但是，在script setup語法中，我們可以通過從Vue導(dǎo)入3次對應(yīng)的 API 來訪問這些相同的選項。

• defineProps – 顧名思義，它允許我們?yōu)榻M件定義 props
• defineEmits – 定義組件可以發(fā)出的事件
• useContext – 可以訪問組件的槽和屬性

<template> 
 <button @click="$emit('change')"> Click Me </button> 
</template> 
<script setup> 
  import { defineProps, defineEmit, useContext } from 'vue' 
 
  const props = defineProps({ 
    foo: String, 
  }) 
  const emit = defineEmit(['change', 'delete']) 
 
  const { slots, attrs } = useContext() 
   
</script> 

通過這3種導(dǎo)入，我們可以獲得傳統(tǒng)設(shè)置方法所慣用的功能。

創(chuàng)建異步 setup 方法

script setup語法的另一個很酷的功能是創(chuàng)建異步setup非常容易。

這對于在創(chuàng)建組件時加載api，甚至將代碼綁定到<suspense>功能很有用。

我們所要做的就是讓我們的 setup函數(shù)是異步的，在我們的script setup中使用一個頂級的await。

例如，如果我們使用的是Fetch API，我們可以像這樣使用await

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

這樣setup()函數(shù)將是異步的。

使用<script setup>和一個普通的<script>

<script setup>為其頂級綁定創(chuàng)建自己的腳本作用域。但是在某些情況下，必須在模塊范圍內(nèi)執(zhí)行代碼。

該RFC中的2個具體示例是:

• Declaring named exports
• 創(chuàng)建僅執(zhí)行一次的全局副作用

這可以通過在 script setup 旁邊添加一個普通的<script>塊來完成，如下所示。

<script> 
  performGlobalSideEffect() 
 
  // this can be imported as `import { named } from './*.vue'` 
  export const named = 1 
</script> 
 
<script setup> 
  // code here 
</script> 

總結(jié)

目前，這個 script setut是可選的，所以如果你想嘗試它，只需在的script標簽中添加setup。

要了解有關(guān) script setup的更多信息，請點擊此處，鏈接到完整的RFC及其動機，確切的語法和更多的技術(shù)實現(xiàn)。

作者：Matt Maribojoc 譯者：前端小智 來源：stackabuse
原文：https://learvue.co/2021/05/explaining-the-ne-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/