介绍一下 Vue Conf 21 大会上：尤大提到 script setup 语法！

电玩女神 2022-10-15 11:55 159阅读 0赞

> 作者：Matt Maribojoc  
> 译者：前端小智  
> 来源：stackabuse

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

如果你最近使用Vite和Vue3工作，你会注意到，在 Vue 组件中会使用这种`<srcript>`语法。

你可能会有疑惑三连，“这是什么鬼？ 这是 Options API ？ 还是 Composition API？ `setup`方法又在哪里？”

`<script setup>`类型是Vue的Git RFC中的建议。 需要明确的是，这并不是要完全替代任何当前写法。 其目的是为开发人员提供更简洁的语法，以编写其单个文件组件。

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

### script setup ###

在`<script setup>`中，我们不必声明`export default`和`setup`方法，这种写法会自动将所有顶级变量声明公开给模板（template）使用。

在 Composition API 中，我们习惯创建`setup`方法，然后返回我们想要公开东西，如下所示：

如果使用 `<script setup>` 语法，我们可以用下面的代码来实现与上面的一样功能：

不仅是数据，计算的属性和方法，甚至是指令和组件也可以在我们的`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`

这样`setup()`函数将是异步的。

### 使用`<script setup>`和一个普通的`<script>` ###

`<script setup>`为其顶级绑定创建自己的脚本作用域。 但是在某些情况下，必须在模块范围内执行代码。

该RFC中的2个具体示例是:

*  Declaring named exports
 *  创建仅执行一次的全局副作用

这可以通过在 script setup 旁边添加一个普通的`<script>`块来完成，如下所示。

### 总结 ###

目前，这个 `script setut`是可选的，所以如果你想尝试它，只需在的`script`标签中添加`setup`。

要了解有关 `script setup`的更多信息，请[点击此处][Link 1]，链接到完整的RFC及其动机，确切的语法和更多的技术实现。

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://learvue.co/2021/05/explaining-the-ne-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/

### 交流 ###

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[Link 1]: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi