vue3中 如何使用组合式API拆分业务功能

 1. 基于业务逻辑的拆分拆分的是什么？
         拆分的是独立的业务逻辑 (js代码)

2. 基于组件的拆分逻辑拆分的是什么？
        拆分的是一个vue实例对象 (html + js + css)

3. 业务逻辑拆分 vs 组件拆分
        组件拆分：1. 复用  2. 减少维护成本(很有可能出现因为组件拆分必定会形成组件嵌套 组件通信 通信成本)
        逻辑拆分：1. 复用 只有js 没有组件通信的问题 (既可以进行复用 又不会造成组件通信成本的增加)

4. 逻辑拆分怎么做呢？
        1. 单独定义一个js文件 useXXX.js
             function useXXX(){
               // 业务逻辑代码
               return {
                 响应式数据
                 事件回调函数
               }
             }
        2. 来到.vue文件中 setup函数执行useXXX函数
             const { 响应式数据,事件回调函数 } = useXXX()
             return {
               响应式数据,
               事件回调函数
             }

5. vue3 setup函数到底是干嘛的？
        setup函数中尽量不要编写太多的业务代码 它只是一个组合函数
        用来把拆分出去的业务逻辑在这里组合起来 供模板使用