概念

它是在 单文件组件 (SFC) 中使用组合式 API 的编译时语法糖，解决 vue3 中 setup() 需要繁琐将声明的变量、函数以及 import 引入的内容通过 return 向外暴露，才能在<template> 使用的问题。

小示例

是不是感觉似懂非懂？先来看个简单的 Vue3 小例子，点击按钮后，改变变量。

<template>
    <div style="background:yellow">{{ img }}</div>
    <button @click="blank()">按钮</button>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {

    // 响应式变量
    const img = ref('黄图')

    // 方法
    const blank = () => {
      img.value = '没了'
    }

    // return
    return { img, blank }
  }
}
</script>

好，可以看到啊，小例子非常简单，大家注意观察代码，是不是 Vue3 的所有数据和方法，都需要 return 出去才可以用？

---

所以说，我们得出一个结论，在 Vu3 中无论是定义的数据、方法、组件、指令等等，全部都需要 return 进行返回，从而暴露给咱们 template 模板使用。

改造示例

注意重点来了，能让你无需 return 直接在模板中使用，我们来改造一下小示例的代码。

<template>
    <div style="background:yellow">{{ img }}</div>
    <button @click="blank()">按钮</button>
</template>

<script setup>
import { ref } from 'vue'

// 响应式变量
const img = ref('黄图')

// 方法
const blank = () => {
  img.value = '没了'
}
</script>

非常的好，省去了很多代码，一样的效果：

组件也无需注册

我们接着引入一个组件看看，在 components 文件夹下新建 layout.vue。

<template>
    我是组件内容~无需注册哦
</template>

然后在引入它。

<template>
    <div style="background:yellow">{{ img }}</div>
    <button @click="blank()">按钮</button>
    <Layout />
</template>

<script setup>
import { ref } from 'vue'
import Layout from './components/layout.vue'

// 响应式变量
const img = ref('黄图')

// 方法
const blank = () => {
  img.value = '没了'
}
</script>

看到没，引入组件自动注册，直接就能用。

其他问题

现在有一个问题啊，用这个语法糖的话，我还能不能再写一个 <script> 标签去做其他事情呢？

答案是可以的，我们来实现一下。

<script setup>
...
</script>

<script>
console.log('我是额外的script...')
</script>

但需要注意啊，setup 语法糖虽然可以和普通的 <script> 一起使用，但是普通的 script 只执行一次，注意啊只执行一次。

另外呢必须声明命名导出，如果有额外的选项，必须 export default {} ，啥意思呢，我们来看一下。

<script>
console.log('我是额外的script，我只执行一次~')
export default {
  data() {
    return {
      name: '额外的选项'
    }
  }
}
</script>

SEO

vue3官方文档，Vue3.0的新语法糖-script setup，VUE3的 单文件组件 script setup 理解与实际上手案例，vue3中的单文件组件script setup详解，vue3中单文件组件<script setup>实例详解，Vue3之单文件组件(SFC)，初识vue3 之单文件组件 script setup，…script setup 语法——单文件组件，Vue3 script-setup 使用指南，vue3 script-setup语法糖，Vue3拒绝写return,用setup语法糖,让写Vue3更畅快，一文看懂vue3单文件组件的语法糖script setup>，Vue3中你应该知道的setup。Vue3之script-setup全面解析，单文件组件script setup> | Vue.js，Vue3的Script Setup使用入门教程。Vue3 - ＜script setup＞ 单文件组件语法糖的使用教程示例 （SFC）