【vue3】9 在vue3.2中，正式支持了script setup的写法

第一次Composition API

在vue3.2中，正式支持了script setup的写法,这样可以大大简化组件的代码量，减少一些重复操作，我认为当你写vue3时，应该把这当作默认写法。在vue3.2之前，一般会这样写。

<script>
   export default {
     setup(props,ctx){
      const a = ref(0)
      //必须return才能在template中使用，这里就存在一个重复操作的问题，每次都得cv,万一忘记就得检查
      return {
          a
      }
     }
   }
</script>

那么现在，我们可以这样写,对比一下，减少了多少行代码呢

<script setup>
    const a = ref(0)
</script>

PS:之后的代码我会省略script setup，默认都在script setup标签下。

也许你会觉得这样就更简单了，其实恰恰相反，CompositionAPI其实要求你对逻辑处理有更清晰的认识，对于封装有更高的要求，否则，你一样会写成比以前更丑的代码。例如：

   const a = ref(0)
   const b = ref('')
   const c = ref(true)
   const d = reactive({})
   const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const act