一、setup 概述
setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API "表演的舞台 " ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
特点：
-
setup函数返回的对象中的内容，可直接在模板中使用。 -
setup中访问this是undefined。 不要用this了 -
setup函数会在beforeCreate之前调用，它是"领先"所有钩子执行的。
注意：
-
vue3可以跟vue2共存，vue2可以获取vue3的数据，反之不行 尽量不要两者都用
-
Vue2的配置（data、methos......）中可以访问到setup中的属性、方法。 -
但在
setup中不能访问到Vue2的配置（data、methos......）。 -
如果与
Vue2冲突，则setup优先。
二、setup 语法糖
setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts" name="Person">
console.log(this) //undefined
</script>含义：
1. <script setup>
在 Vue 3 中，使用 <script setup> 语法可以更加简洁和高效地定义组件，特别是在使用 TypeScript 时。
-
简化组件的定义 ：
<script setup>是 Vue 3.2 及以上版本引入的一个新的<script>语法。它允许你在组件中更简洁地使用组合式 API。与传统的setup()函数不同，使用<script setup>时，不需要显式返回你想要在模板中使用的变量或函数。 -
自动导入 ：在
<script setup>中，一些 Vue 的常用 API（如ref、computed等）会被自动引入，因此不需要手动导入。
2. lang="ts"
- TypeScript 支持 ：通过设置
lang="ts"，你告诉 Vue 这个脚本使用 TypeScript。这样你可以在组件中使用 TypeScript 的类型系统，包括类型注解、接口、类型推断等，增强代码的可读性和可维护性。
3. name="Person"
- 组件名称 ：在
<script setup>中指定name属性为组件的名称。在这个例子中，name="Person"指定了该组件的名称为Person。虽然在大多数情况下，组件名称通常在导入时就已经定义，但显式指定name属性可以在调试时更容易地识别组件，尤其是在使用 Vue DevTools 时。