• 技术文章 >web前端 >前端问答

    vue中什么是模块化

    青灯夜游青灯夜游2022-12-23 18:06:51原创181

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

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    什么是模块化

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

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

    在这里插入图片描述

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

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

    总结:

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

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

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

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

    1、条理清晰,便于维护

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

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

    模块化和组件化的对比

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

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

    3、组件使用按分类有:页面组件、业务组件、通用组件;

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

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

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

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

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

    他们的区别在于

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

    组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的复用【相关推荐:vuejs视频教程web前端开发

    以上就是vue中什么是模块化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue 模块化
    上一篇:vue中watch是什么属性 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue模板预编译是什么• vue webpack可打包哪些文件• vue dom是什么意思啊• vue全局组件和局部组件的区别是什么• vue动态路由有哪两种实现方法• 一文详解项目中怎么根据vue版本进行差异化处理
    1/1

    PHP中文网