setup概述

setup 是 vue3 中的一个新配置项，值是一个函数，它与 Composition API 深度绑定，组件中所用到的：数据、方法、计算属性、监视......等，均配置在 setup 中。

setup 的特点如下：

• setup 函数返回的对象中的内容，可直接在模板中使用。
• setup 中访问 this 可能会提示 undefined，不推荐使用 this。
• setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。

setup的返回值

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

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

setup 与 Options API 的关系

Vue2 的配置（data、methos......）中可以访问到 setup 中的属性、方法，但在 setup 中不能访问到 Vue2 的配置（data、methos......）。如果与 Vue2 冲突，则 setup 优先。

setup语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，可以借助 vite 中的 vite-plugin-vue-setup-extend 插件简化，安装命令：

安装后编辑配置文件 vite.config.ts，添加如下配置：

配置完成后，可在组件内的 script 标签中，通过 name 指定组件名称，省去单独定义 script 的代码