前言

很多框架都适配了vue3 例如element ui 、element ui Plus、ant design Vue等随着很多ui框架的适配，vue3也逐渐成为主流，vue3也新增加了一个语法糖setup

一、setup是什么？

setup是组合式API
根据官方文档描述
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

需要在非单文件组件中使用组合式 API 时。
需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

这块的意思是写法不同 setup有两种写法

二、setup使用方法

1.第一种

代码如下（示例）：

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const top = ref(10);
    const bottom = ref(10);
    return {
      top,
      bottom,
    };
  },
});
</script>

defineComponent官方释义是 在定义 Vue 组件时提供类型推导的辅助函数。
这个结构体系跟vue2很像只是多个 defineComponent与setup。在这个结构里面依然可以使用vue2的选项式API 也就是data()结构体系 vue3可以使用组合式API与选项式API 组合式API也是基于选项式API来实现的
但是如果使用上述方法的组合式API 模板访问的变量需要放在return中暴露出来如果需要实时响应变化需要给变量加上ref属性 如果函数是对象格式使用 reactive() reactive()返回一个对象的响应式代理

2.第二种

代码如下（示例）：

<script setup>
	import {ref} from 'vue';
	//定义变量
	const status = ref(1)  
	 //ref 可以实时更新同步次变量   
	 //接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性
	 //定义一个不是响应式的变量
	 const status1 = 2
	//定义方法
	const click = (传递的参数 可以为空)=>{
		//逻辑代码
		//更改两个变量的值
		status.value=3
		status1.value = 3
		//在页面上使用模板变量{{status}} -- {{status1}}
		会发现  status的值会变化  而status1就不会变化
	}
</script>