＜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>

运行效果：