关于心理学:优秀职场人必修课职场心理学-助你走出内耗陷阱无密分享

download：https://www.666xit.com/3483/

第一次 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 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 的含意之一。