script setup 語法的使用方法

這篇文章主要介紹“script setup 語法的使用方法”，在日常操作中，相信很多人在script setup 語法的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”script setup 語法的使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

如果你最近使用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中的建議。需要明確的是，這并不是要完全替代任何當前寫法。其目的是為開發人員提供更簡潔的語法，以編寫其單個文件組件。

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

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 &ndash; 顧名思義，它允許我們為組件定義 props

• defineEmits &ndash; 定義組件可以發出的事件

• useContext  &ndash; 可以訪問組件的槽和屬性

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

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

該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 setup 語法的使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！