vue中什么是模块化

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

vue中什么是模块化

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

什么是模块化

我们说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组件的复用【相关推荐:vuejs视频教程、vuejs视频教程】

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2923478.html

(0)
上一篇 2025年3月11日 18:48:17
下一篇 2025年3月11日 18:48:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue 怎么隐藏内容

    vue隐藏内容的方法:1、在所需要隐藏或显示的内容div加“v-show”;2、在iconfont图标的div加入一个点击事件;3、在×处用transition包裹,并添加name属性;4、为fade添加效果样式即可。 本教程操作环境:Wi…

    2025年3月11日
    200
  • vue sync出错怎么办

    vue sync出错的解决办法:1、修改父组件传过来的数据,代码如“”;2、把需要传递的基本数据类型值放入对象中,代码如“”。 本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。 vue sync出错怎么办? Vue…

    2025年3月11日
    200
  • vue初始化data方法有哪些

    vue初始化data方法有两种:1、object方式,语法“var data = { 键值对 }”;2、function方式,语法“data: function () {return { 键值对 }}”。需要注意组件和extend中的dat…

    2025年3月11日
    200
  • vue条件渲染包括什么

    vue条件渲染指令包括v-if、v-else、v-else-if、v-show。v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回真值时才被渲染;v-else可以为v-if添加一个“else 区块”,v-else-if可以…

    2025年3月11日 编程技术
    200
  • vue中mvvm和mvc的区别有哪些

    mvvm和mvc的区别:1、mvvm各部分的通信是双向的,而mvc各部分通信是单向的。2、MVVM实现了view与model的自动同步,也就是model属性改变时,不需要手动操作dom元素去改变view的显示,而是改变属性后该属性对应的vi…

    2025年3月11日 编程技术
    200
  • 用vue写的页面后缀名是什么

    用vue写的页面后缀名是“.vue”。“.vue”文件是一个自定义的文件类型,用类HTML语法描述一个Vue组件;一个vue文件就是一个组件。vue页面有3个组成部分:1、模板(template),即template标签包裹的界面展示代码(…

    2025年3月11日 编程技术
    200
  • vue遍历对象属性的方法有哪些

    遍历对象属性的方法有:1、使用v-for指令遍历出对象的key和value,语法“v-for=”(val,key,i) in obj””;2、用Object.keys()遍历对象的键和值,语法“Object.keys…

    2025年3月11日 编程技术
    200
  • vue事件总线废除了吗

    vue3取消了全局事件总线,废除原因是安全性低。全局事件总线是一个全局任意组件通信技术,即任意组件间的通信均可实现。在vue3中,如果想要使用全局事件总线,需要引入第三方库mitt或tiny-emitter。 本教程操作环境:windows…

    2025年3月11日
    200
  • vue支持ie6么

    vue不支持ie6;vue官方声明是支持ie8以上版本的。不支持原因:1、ie8及以下版本不支持“Object.defineProperty”方法,但该方法是vue实现响应式的所必须的;2、Vue需要Promise的支持,而IE8及以下版本…

    2025年3月11日
    200
  • vue中mounted和created有什么区别

    区别:1、created在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图;mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。2、created中无法对chart…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论