文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中组件化和模块化有什么区别

2023-05-14 21:57

关注

vue中组件化和模块化有什么区别

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

模块化的由来

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

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

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

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

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

了解下es6模块化开发吧

关键字export(导出) import(导入)

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

1.png

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

就可以使用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:'<h3>使用Vue.extend 来创建全局的Vue组件</h3>'
        })
        //1,使用Vue.component('组件名',创建出来的组件模板对象)
        Vue.component('mycom1',com1)
 </script>

第二种

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

第三种

<templat id="temp">
 <div>
   <h1>通过templat元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
   <h4>好用,不错</h4>
  </div>
</templat>
<script>
 Vue.component('mycom2',{
            template:'temp'
        })
</script>

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

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

【相关推荐:vuejs视频教程】

以上就是vue中组件化和模块化有什么区别的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯