Vue3系列——关于setup及其语法糖

什么是setup？

setup是在组件中使用组合式API的入口，是vue3中的一个新的配置项，值为一个函数。如下：

注意：

1. setup函数中的this是undefined，Vue3中已经弱化this了

2. 如果data、methods与setup同时存在时，data和methods可以通过this读取setup中的数据，但setup不能读取data中的数据与methods中的方法，因为setup执行早于data

setup的返回值

setup的返回值的用处是为模板提供数据，返回值可以是一个对象，也可以是一个函数。如下：

setup的语法糖：<script lang=”ts” setup>

前面这种写法是不是非常麻烦，如果有非常多的数据或方法，都需要手动return出去。setup的语法糖就恰好解决了这个麻烦，它自动完成了return的步骤，且只需要直接写setup中的方法体即可。话不多说，先来个对比：

（1）没有用setup的语法糖：

（2）用了setup的语法糖：

是不是简洁了很多，接下来就看下setup的语法糖怎么才能使用。

setup语法糖的使用方法：

1. 安装插件：npm i vite-plugin-vue-setup-extend -D

2. 在vite.config.js文件中添加：

3. 在组件中script部分：

这样不需要return，模板中就可以直接使用定义的变量与方法啦。

完结，撒花 ***^-^***