前言
在讲解 setup 之前我想跟大家说一下目前 Vue 有两种编程术语：
选项式 API （Option API）编程·组合式 API （Compotion API）编程
在 Vue2 中，我们平时写代码是根据 Vue 实例提供的属性（比如 data / method / mounted / actived ...）来写的， 这种就叫做 选项式 API，而在 Vue3 中新增了一个 setup 函数，我们在这个 setup 函数里面写代码就叫做 组合式 API
另外，Vue3 也支持 Vue2 语法，即你可以混合使用选项式 API / 组合式 API
下面我们开始进入正题。
Setup 简单用法
<template>
<div>{
{
user.greet }}, {
{
user.name }}</div>
<button @click="getUserName"> Get </button>
</template>
<script>
// 引入相关属性供 setup 使用
import {
onMounted, reactive } from 'vue'
export default {
setup() {
// 定义数据 === data() {return { user: {greet ...} })
const user = reactive({
greet: 'Hello',
name: 'Tony'
})
// 定义函数 === method: { getUserName() {} }
const getUserName = () => {
alert(user.name)
}
// 定义生命周期函数 === mounted() {}
onMounted(() => {
})
// ...
// template 模板要想访问数据和函数就得 return 出去。
return {
user,
getUserName
}
}
}
</script>
很简单对不对，有读者或新手可能注意到了，定义 user 数据用到了 reactive 函数，此函数是为了让数据后续的更改操作能够响应式更新，你可以理解为 Vue2 的data 为我们自带响应式，而在 setup 里头如果不用 reactive 就会失去响应式。
以上只是简单用法，关于 setup 里面有多少种语法可以使用官方已经足够详细了，这里笔者不再做阐述，我们只需关心 setup 的
好处
封装能力、灵活性更强悍，比如我们可以把 setup 里头的代码封装起来放到 js 文件里去，给需要用到的组件引入进来即可，节省重复代码，大大提升效率。
缺陷
Vue3 新增的这个 setup 函数笔者认为更多的为了提高编程的灵活性，适用于对代码管理层面有要求的人，但就是因为太灵活了，所以官方说明了“”对于新手来讲最大的缺陷就是容易造成写出面条式代码” PS: 就是一气呵成的那种！
结尾
记住， vue3 新特性就是专门围绕在 setup 里面写代码
看完本篇后，笔者建议你按照顺序阅读下一篇文章：
Vue3 理解 ref 和 reactive 的用法、区别
按照顺序阅读，同时这也是 vue3 日常所使用的，相信等你全部看完后对 setup 和相关语法有一定的认识。