广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。

能够使用纯 TypeScript 声明 props 和自定义事件。

更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。

更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

以上是vue3官网对<script setup>的说明，其实＜script setup＞ 就是 setup函数的一个语法糖。

<script>import { ref } from 'vue'export default {  setup () {    const num = ref(1);    return { num }  }}</script>

setup函数的写法中定义的变量和函数都需要return出来，不然无法正常使用。

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>

在＜script setup＞语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

<template>  <div>    <h3> {{test(name)}}</h3>  </div></template><script>import { ref } from 'vue'import { test } from '@/utils/test.js'export default {  setup () {    const name = ref('huang')    const testName = test     return { name, testName }  }}</script>

setup函数使用外部文件时需要在setup函数中定义成一个方法才能正常使用。

<template>  <div>    <h3>{{ test(name) }}</h3>  </div></template><script setup>import { test } from '@/utils/test.js'import { ref } from 'vue'const name = ref('huang')</script>

在＜script setup＞语法糖中无需再定义成一个方法，可以直接使用 。

<script>import Hello from '@/components/HelloWorld'export default {  components: {    Hello  }}</script>

<script setup>import Hello from '@/components/HelloWorld'</script>

不需要在component 中注册了，可以直接使用。

<template>    <h2 v-onceClick>使用了setup函数</h2></template><script>export default {  directives: {    onceClick: {      mounted (el, binding, vnode) {        console.log(el)      }    }  },}</script>

<template>    <h2 v-my-Directive>使用了script setup</h2></template><script setup>const vMyDirective = {  beforeMount: (el) => {    console.log(el)  }}</script>

全局注册的自定义指令将正常工作。本地的自定义指令在 <script setup> 中不需要显式注册，但他们必须遵循 vNameOfDirective 这样的命名规范

<Com :num="100"></Com>

<script>export default {  props: {    num: {      type: Number,      default: 1    }  },  setup (props) {    console.log(props)  }}</script>

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>0

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>1

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>2

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要被导入，因为它们将会随着 <script setup> 处理过程被编译。

defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。

defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。

传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，在 setup 作用域中声明的局部变量不能被传入的选项引用。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

使用setup函数定义的组件的expose是默认开启的，会将函数内定义的实例变量、方法全部暴露出去。而使用＜script setup＞的组件是默认关闭的&mdash;&mdash;即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性，若不使用 defineExpose 则获取不到当前引用的组件实例变量、方法。

使用了defineExpose

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>3

不使用defineExpose

<script setup>    import { ref } from 'vue'    const num = ref(1)</script>4

可以同时使用常规的