介紹一下 Vue Conf 21 大會上：尤大提到 script setup 語法！

作者：前端小智 2021-05-24 08:04:03

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

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

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

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

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

script setup

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

在 Composition API 中，我們習慣創建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> 語法，我們可以用下面的代碼來實現與上面的一樣功能：

<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>

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

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

這個很魔法。

那么，這有什么意義呢？

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

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

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

<script setup>的更高級用法

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

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

訪問 props
怎么發出自定義事件
訪問上下文對象

在Composition API中，這些放在了setup 方法中的參數

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

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

defineProps – 顧名思義，它允許我們為組件定義 props
defineEmits – 定義組件可以發出的事件
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種導入，我們可以獲得傳統設置方法所慣用的功能。

創建異步 setup 方法

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

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

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

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

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

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

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

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

Declaring named exports
創建僅執行一次的全局副作用

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

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

總結

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

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

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

責任編輯：姜華來源：大遷世界