模块组件化

Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。

如果单个组件做了太多的事或是变得臃肿，请考虑将其拆分成小的组件。

• 为什么要组件化？

  • 组件化开发能大幅提高应用开发效率、测试性、复用性等；
  • 组件使用按分类有：页面组件、业务组件、通用组件。
  • 主要还是为了易于管理和合作开发。

• 拆分需要考虑 （个人理解）

  • 如果单文件组件有多个模块，按模块拆分组件。
  • 根据页面功能拆分时，考虑下通信是否便捷？
  • 组件的代码可读性有没有提升
  • 父组件代码膨胀(尽量不要一堆堆个1000多行)，优化推荐：
    • 1. 组件拆分，单文件将JS逻辑通过公共组件方式抽离再引入。
    • 2. 按功能拆分，一个组件一个功能，分离逻辑层和业务层，注明功能说明。
    • 3. 利用vue的 mixin，把业务逻辑中的每一部分功能的js写到mixin里面去。（功能模块拆分）

    例1：

    // Home.vue
    import navBarJs from '../js/navBar.js'
    export default {
        ...navBarJs
    }
    
    

    例3：

    // Home.vue
    import tabMixin from 'src/base/mixins/tabMixin'
    export default {
        mixins: [ tabMixin ],
    }
    
    // tabMixin.js
    export default {
        // 逻辑代码略
    }