script setup 語(yǔ)法的使用方法

這篇文章主要介紹“script setup 語(yǔ)法的使用方法”，在日常操作中，相信很多人在script setup 語(yǔ)法的使用方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”script setup 語(yǔ)法的使用方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

<script setup> import HelloWorld from './components/HelloWorld.vue' // 這個(gè)模板使用的是Vue3實(shí)驗(yàn)性`<script setup>` SFCs

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

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

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

script setup

在<script setup>中，我們不必聲明export default和setup方法，這種寫(xiě)法會(huì)自動(dòng)將所有頂級(jí)變量聲明公開(kāi)給模板（template）使用。

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

<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> 語(yǔ)法，我們可以用下面的代碼來(lái)實(shí)現(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ù)，計(jì)算的屬性和方法，甚至是指令和組件也可以在我們的template中自動(dòng)獲得。

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

這個(gè)很魔法。

那么，這有什么意義呢？

長(zhǎng)話(huà)短說(shuō)，此語(yǔ)法使單個(gè)文件組件更簡(jiǎn)單。

用RFC的里的原話(huà)來(lái)說(shuō)，“該提案的主要目標(biāo)是通過(guò)將<script setup>的上下文直接暴露給模板來(lái)減少SFC內(nèi)部 Composition API 使用的冗長(zhǎng)性?！?/p>

這就是我們剛剛看到的，無(wú)需關(guān)心在setup方法返回的值(因?yàn)橛袝r(shí)應(yīng)該會(huì)忘記在 setup 返回我們需要的值，導(dǎo)致模板獲取不到對(duì)應(yīng)的值)，我們可以簡(jiǎn)化代碼。

<script setup>的更高級(jí)用法

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

訪(fǎng)問(wèn) props, emit 事件 等
首先，你可能想知道如何執(zhí)行標(biāo)準(zhǔn)的Vue操作，例如：

• 訪(fǎng)問(wèn) props

• 怎么發(fā)出自定義事件

• 訪(fǎng)問(wèn)上下文對(duì)象

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

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

但是，在script setup語(yǔ)法中，我們可以通過(guò)從Vue導(dǎo)入3次對(duì)應(yīng)的 API 來(lái)訪(fǎng)問(wèn)這些相同的選項(xiàng)。

• defineProps &ndash; 顧名思義，它允許我們?yōu)榻M件定義 props

• defineEmits &ndash; 定義組件可以發(fā)出的事件

• useContext  &ndash; 可以訪(fǎng)問(wèn)組件的槽和屬性

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

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

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

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

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

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

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

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

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

使用<script setup>和一個(gè)普通的<script>

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

該RFC中的2個(gè)具體示例是:

• Declaring named exports

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

這可以通過(guò)在 script setup 旁邊添加一個(gè)普通的<script>塊來(lái)完成，如下所示。

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

到此，關(guān)于“script setup 語(yǔ)法的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！