何为Setup：

        setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API 行为的根基，组件中所用到的：数据、方法、计算属性、钩子、自定义方法、自定义插槽、自定义Ref、监视......等等，均配置在setup中。

        格式如下：（直观来看，仍然不像是组件式的，反倒像选项式的）

<script lang="ts">export default {name:'Person',setup(){// 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）let name = '张三'let age = 18let tel = '13888888888'// 方法，原来写在methods中function changeName(){name = 'zhang-san' //注意：此时这么修改name页面是不变化的console.log(name)}function changeAge(){age += 1 //注意：此时这么修改age页面是不变化的console.log(age)}function showTel(){alert(tel)}// 返回一个对象，对象中的内容，模板中可以直接使用return {name,age,tel,changeName,changeAge,showTel}}}
</script>

Setup的特点：

1. setup函数返回的对象中的内容，可直接在模板中使用。

2. setup中访问this是undefined。

3. setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

4. setup含有顶层async，在script中异步调用获得数据时可以只写await

setup 的返回值：

        

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用。

• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){return ()=> '你好哇！'
}

setup 与 Options API 的关系：

• Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。

• 但在setup中不能访问到Vue2的配置（data、methos......）。

• 如果与Vue2冲突，则setup优先。

setup 语法糖：

直接将setup写在script标签中

<script setup lang="ts">console.log(this) //undefined// 数据（注意：此时的name、age、tel都不是响应式数据）let name = '张三'let age = 18let tel = '13888888888'// 方法function changName(){name = '李四'//注意：此时这么修改name页面是不变化的}function changAge(){console.log(age)age += 1 //注意：此时这么修改age页面是不变化的}function showTel(){alert(tel)}
</script>

上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

第一步：包管理器下载插件：npm i vite-plugin-vue-setup-extend -D

第二步：vite.config.ts配置下述代码：

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
​
export default defineConfig({plugins: [ VueSetupExtend() ]
})

第三步：使用<script setup lang="ts" name="Person">