vue中组件化和模块化有哪些区别

这篇文章主要介绍“vue中组件化和模块化有哪些区别”，在日常操作中，相信很多人在vue中组件化和模块化有哪些区别问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中组件化和模块化有哪些区别”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

组件化和模块化的区别：模块化是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个每个功能模块的职能一致。组件化是从UI界面的角度进行规划；前端的组件化，方便UI组件的重用。

模块化的由来

在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或者动画实现，代码量比较少，只要写在script标签里面就可以了

随着ajax异步请求的出现，慢慢形成了前后端分离，客户端需要完成的事情越来越多，代码量也越来越多。为了应对代码量的剧增，我们通常会把代码组织在多个js文件中，进行维护

但会出现一些问题：比如全局变量同名的问题

使用函数闭包可以解决变量冲突的问题，但是使用不了其他文件定义的变量

模块化有两个核心：导出和导入

了解下es6模块化开发吧

关键字export（导出） import（导入）

例如这样，封装发送ajax的一个模块

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，要让导入者来自己命名

就可以使用export default

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

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

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

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

1、条理清晰，便于维护

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

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

组件化和模块化对比

很多人将组件化和模块化理解为一个，当然很多地方相似，那下面大家一起看看不相似吧！

1、组件化是独立和可复用的代码组织单元。组件系统是vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；【相关推荐：vuejs入门教程、web前端】

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

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

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

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

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

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

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

组件化和模块化的不同：

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

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

全局组件定义的三种方式

第一种

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:'<h4>使用Vue.extend 来创建全局的Vue组件</h4>'
        })
        //1,使用Vue.component('组件名'，创建出来的组件模板对象)
        Vue.component('mycom1',com1)
 </script>

第二种

<script>
Vue.component('mycom2',{template:'<div><h4>使用Vue.component 创建出来的组件</h4>s<span>template</span></div>'
        })
</script>

第三种

<templat id="temp">
 <div>
   <h2>通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h2>
   <h5>好用，不错</h5>
  </div>
</templat>

<script>
 Vue.component('mycom2',{
            template:'temp'
        })
</script>

注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素。

在工作项目开发中第三种方法最好用

到此，关于“vue中组件化和模块化有哪些区别”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！