介绍一下 Vue Conf 21 大会上：尤大提到 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> 语法，b2b信息网我们可以用下面的代码来实现与上面的一样功能：

<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 thats it! </script> 

这个很魔法。

那么，这有什么意义呢？

长话短说，此语法使单个文件组件更简单。

用RFC的里的原话来说，“该提案的主要目标是通过将<script setup>的上下文直接暴露给模板来减少SFC内部 Composition API 使用的冗长性。”

这就是我们刚刚看到的，无需关心在setup方法返回的值(因为有时应该会忘记在 setup 返回我们需要的值，导致模板获取不到对应的值)，我们可以简化代码。

<script setup>的更高级用法

现在我们知道<script setup>到底是什么，云南idc服务商以及为什么它有用，接着，我们看一下它的一些更高级的功能。

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

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

很赞哦!（157）