Web前端最全介绍一下 Vue Conf 21 大会上：尤大提到 script setup 语法！，前端面试

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

不仅是数据，计算的属性和方法，甚至是指令和组件也可以在我们的template中自动获得。

这个很魔法。

那么，这有什么意义呢？

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

用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 – 可以访问组件的槽和属性

<button @click=“$emit(‘change’)”> Click Me

通过这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>块来完成，如下所示。