我是靠谱客的博主 鳗鱼雨,这篇文章主要介绍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函数中尽量不要编写太多的业务代码 它只是一个组合函数
        用来把拆分出去的业务逻辑在这里组合起来 供模板使用

最后

以上就是鳗鱼雨最近收集整理的关于vue3中 如何使用组合式API拆分业务功能的全部内容,更多相关vue3中内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(53)

评论列表共有 0 条评论

立即
投稿
返回
顶部