完成第一个vue3.2项目有感

第一次Composition API

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

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

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 actionB = ()=>{b.value += 'test' }
   const actiond = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }

这一堆代码其实就是当你没有考虑逻辑，没有想过封装的时候，像流水账一样直接写出来的代码，这些代码真的比optionsApi更好阅读吗，当然不。
这里更加混乱，你很难一眼看出某个函数用的是哪个变量，顺序混乱，这时候需要封装，需要组合，这也是CompositionAPI的含义之一。