一、使用<script setup> 之后，就不需要手动写以下代码，只要写逻辑代码
未加setup，vite 工程要加上下面代码
*export default{
* setup(){
* //只要写逻辑代码
* return{***}
* }
* }
加了setup ，export default 、setup() return{***} 不需要写了。vue做特殊编译处理
eg：
<script setup>
/**
* 单文件组件中使用组合式api:在顶部script标签元素上加上setup属性，vue做特殊编译处理
* 使用<script setup> 之后，就不需要手动写以下代码，只要写逻辑代码
* export default{
* setup(){
* //只要写逻辑代码
* return{***}
* }
* }
*/
//只要导入和逻辑代码
import {reactive} from 'vue';
const state = reactive({
id:1,
name:'小梦',
salary:999
})
function add(){
state.salary++;
}
//不需要return
</script>
<template>
<div>
{
{ state.id }} === {
{ state.name }} ==={
{ state.salary }}
<button @click="add">工资加1</button>
</div>
</template>
<style scoped>
</style>
运行效果：
