🛫 导读

需求

最近写代码的时候，发现<script setup>这样的代码，没见过，好奇，想知道。
所以就有了这篇文章。

很多文章都说setup是vue3的特权。但是，vue2.7以后，vue2也有了这样的特性，所以大胆的去学习吧。

开发环境

	版本号	描述
文章日期	2023-10-30
vue	2.7

1️⃣ <script setup>

相比普通script语法的优势

<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。

• 更少的样板内容，更简洁的代码
• 能够使用纯 Typescript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

语法

要使用这个语法，需要将 setup 属性添加到script代码块上

<script setup>
	console.log('hello script setup')
</script>

顶层的绑定会被暴露给模板

• 任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用
• import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过 methods 选项来暴露它：

<script setup>
// import 出来的变量
import { capitalize } from './helpers'
// 变量
const msg = 'Hello!'
// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
  <div>{{ capitalize('hello') }}</div>
</template>

组件

• 直接使用
  <script setup>范围里的值也能被直接作为自定义组件的标签名使用：

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

• 动态组件
  由于组件被引用为变量而不是作为字符串键来注册的，在

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

顶层 await

<script setup> 中可以使用顶层 await。结果代码会被编译成async setup()
注意，async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性

2️⃣ 组合式 API

TIP
这个 FAQ 假定你已经有一些使用 Vue 的经验，特别是用选项式 API 使用 Vue 2 的经验。

概念

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。
其中涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
• 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

可以在官网https://cn.vuejs.org/api/查看组合式 API列表。

对应的，选项式 API列表如下：

常用方法

• ref：可以接受一个参数值并返回一个响应式且可改变的对象。
• defineProps：父传子，定义属性
• defineEmits：子传父
• defineExpose：明确要暴露出去的属性
• onMounted、onUnmounted：生命周期相关
• inject：注入

优缺点

	选项式API	组合式API
优点	新手上手简单	可读性和可维护性高，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清） 跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的（可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，可以放在一个TS文件中，也可在npm中单独发布，最终Composition API把他们组合起来）
缺点	一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散。（一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能，而且当你想要新增一个功能的时候你可能需要在 data，methods，computed，watch中都要写一些东西，特别影响效率。）	学习成本可能会增加，以前的思维方式也要转变
this	this指向不明	减少了this指向不明的情况
命名冲突	引用名称冲突	不存在冲突问题
图示

🛬 文章小结

📖 参考资料

• vue3中的单文件组件＜script setup＞详解 https://blog.csdn.net/qq_41880073/article/details/124199104
• 迁移至 Vue 2.7 https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html
• vue3学习（2）选项式API和组合式API的区别 https://juejin.cn/post/6966606592024576013