介绍一下 Vue Conf 21 大会上：尤大提到 script setup 语法！-51CTO.COM

如果你最近使用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/