＜script setup＞ 的作用

一、使用<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>

运行效果：