vue模块化指的是什么

这篇“vue模块化指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue模块化指的是什么”文章吧。

在vue中，模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护）。模块化开发的好处：1、条理清晰，便于维护；2、不会一次将所有数据请求回来，用户体验感好；3、模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

什么是模块化

我们说Vue项目是按照模块进行划分的，那么什么是模块呢？

模块化，就相当于我们网站的导航栏，那么每一个导航项就可以看作是如下图片中提到的

• 模块化，就好比是一个大的功能项，那么这个大的功能项又可以包含多个组件。

• 在使用的时候，单个模块对应的是我们Vue项目下compentent下的文件目录

• 每一个模块下面又可以有多个组件，这些组件又组成了完整的模块页面（单页面）

• 但是每一个模块下面必须要有一个主要的文件（模块父组件），这个文件必须在路由管理中（router/index.js）进行注册，注册的时候满足以下形式：

export default new Router({
  mode: 'history',
  routes: [
		{
      path: '/',
      name: 'Default',
      redirect: '/home',
      component: Home    }]
    })

其余的组件可以通过以下的方式进行注入使用。在使用的时候，将组件的name属性中的名称在父组件中进行标签化处理（vue会将以驼峰命名的名称进行转化--------（BookManager——>book-manager））

• 首先要在用到的页面中的中通过import进行导入

• 其次需要在compent中进行注册,注册的时候会使用组件的name属性进行注入

总结：

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护）。

为什么要使用模块化？使用模块化的好处

当然，不使用模块化开发也能实现页面的所有功能，但是会加重对服务器请求的压力和降低用户的体验，当页面需要的数据过多时，一次请求就包含了所有请求的数据，如果用户不需要呢？这样的请求还有效果吗！当然是没效果的，所以，利用模块化开发的思想就能解决这类问题

简单谈谈自己对模块化开发使用的好处

1、条理清晰，便于维护

2、不会一次将所有数据请求回来，用户体验感好

3、模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块

模块化和组件化的对比

1、组件化是独立和可复用的代码组织单元。组件系统是vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；

2、组件化开发能大幅度提高应用开发效率、测试性、复用性等；

3、组件使用按分类有：页面组件、业务组件、通用组件；

4、vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；

5、vue中常见组件化技术有属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；

6、合理的划分组件，有助于提高应用性能；

7、组件应该是高内聚、低耦合的；

8、遵循单向数据流的原则。

他们的区别在于

模块化：是从代码逻辑的角度进行划分；方便代码进行分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的复用

以上就是关于“vue模块化指的是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。