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属性进行注入
总结:
模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块(方便代码的重用,从而提升开发效率,并且方便后期的维护)。
为什么要使用模块化?使用模块化的好处
当然,不使用模块化开发也能实现页面的所有功能,但是会加重对服务器请求的压力和降低用户的体验,当页面需要的数据过多时,一次请求就包含了所有请求的数据,如果用户不需要呢?这样的请求还有效果吗!当然是没效果的,所以,利用模块化开发的思想就能解决这类问题
简单谈谈自己对模块化开发使用的好处
条理清晰,便于维护
不会一次将所有数据请求回来,用户体验感好
模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
模块化和组件化的对比
组件化是独立和可复用的代码组织单元。组件系统是vue核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用;
组件化开发能大幅度提高应用开发效率、测试性、复用性等;
组件使用按分类有:页面组件、业务组件、通用组件;
vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,它们基于VueComponent,扩展于Vue;
vue中常见组件化技术有属性prop,自定义事件,插槽等,它们主要用于组件通信、扩展等;
合理的划分组件,有助于提高应用性能;
组件应该是高内聚、低耦合的;
遵循单向数据流的原则。
他们的区别在于
模块化:是从代码逻辑的角度进行划分;方便代码进行分层开发,保证每个功能模块的职能单一
组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的复用
以上就是关于“vue模块化指的是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341