码云笔记前端博客
Home > JavaScript > [Vue教程]如何理解组件化思想

[Vue教程]如何理解组件化思想

2019-02-04 分类:JavaScript 作者:码云 阅读(4274)

本文共计714个字,预计阅读时长需要2分钟。

本章将为大家介绍vue的组件化思想,什么是组件化呢?

一个组件相当于是一个模块,他是独立存在于我们的vue应用里面的。那么,一个组件可以在a页面1上面使用,也可以在2页面上使用,它是可以去复用的,同样的道理在这个页面上我们也可以重复使用这个组件。然后这个组件的里面是包含整个组件要用到的业务逻辑和样式的,所以说它也是一个整体化的。

为什么要组件化?

组件化的第一个目的就是实现了模块的复用,不需要我们去把功能代码或者是业务代码重复的去编写,而且也很方便的去进行一些维护;第二个目的就是在代码的执行层面,它可以很高效的去执行demo的渲染;最后,就是在我们去开发一些复杂的单页面应用的时候或者是复杂的页面应用,利用组件化的思想是很方便的让我们把这种复杂的业务逻辑进行一个拆分。

如何进行拆分?

这里提供几个原则供大家参考,首先我建议大家业务代码不要超过300行即300行原则,其实也有150行原则,300行原则什么意思呢,就是整个组件包括业务代码和样式尽量少一点,方便大家今后阅读。

再一个就是这个组件经常去使用,我们举个例子,比如说头部的这个导航,或者说底部的这种版权信息,还有侧边栏,这些都是我们经常要去复用的,那么像这样的模块我们就要去拆分,我们称他为复用原则。

最后就是业务复杂性原则。

当然,这种组件化模块化思想看是很美好,但也有一定的弊端,比如说组件之间的状态管理(vuex),我们这里有官方的这种工具vuex,它会做一些状态的管理。那么多组件的混合使用,多页面这种复杂业务的怎么样去展示,怎么样去使用到那些组件,就用到了vue-router,以及组件之间的传参、消息、事件的管理,其实都是非常复杂的,在后面的章节我会一一为大家介绍。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 1 条评论 - [Vue教程]如何理解组件化思想

  1. 张博宇 Linux Chrome 62.0.3202.84

    组件化开发

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论