一文详解Vue3中的script setup语法糖
script setup 语法糖
组合式 API：setup()
基本使用
Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。【学习视频分享：vue视频教程、web前端视频】
setup 选项是一个接收 props 和 context 的函数，我们参考文档进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'
export default defineComponent({
setup(props, context) {
// 在这里声明数据，或者编写函数并在这里执行它
return {
// 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
}
},
})
</script>新的 setup 选项是在组件创建之前, props 被解析之后执行，是组合式 API 的入口。
注意：
在setup中你应该避免使用this，因为它不会找到组件实例。setup的调用发生在dataproperty、computedproperty 或methods被解析之前，所以它们无法>在setup中被获取。
在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用
这里强调一句 “暴露给模板，跟暴露给外部不是一回事”
TIP：说的通俗一点，就是在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在 setup 里执行。
因为在 setup 之后，其他的生命周期才会被启用，我们对比一下Vue2的Vue3生命周期的变化
组件生命周期
关于 Vue 生命周期的变化，可以从下表直观地了解：
| Vue 2 生命周期 | Vue 3 生命周期 | 执行时间说明 |
|---|---|---|
| beforeCreate | setup | 组件创建前执行 |
| created | setup | 组件创建后执行 |
| beforeMount | onBeforeMount | 组件挂载到节点上之前执行 |
| mounted | onMounted | 组件挂载完成后执行 |
| beforeUpdate | onBeforeUpdate | 组件更新之前执行 |
| updated | onUpdated | 组件更新完成之后执行 |
| beforeDestroy | onBeforeUnmount | 组件卸载之前执行 |
| destroyed | onUnmounted | 组件卸载完成后执行 |
| errorCaptured | onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数 |
可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。
script setup 语法糖
它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
自动注册属性和方法无需返回，直接使用
1.