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

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

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

为什么要组件化?

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

如何进行拆分?

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

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

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

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

「点点赞赏,手留余香」

7

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [Vue教程]如何理解组件化思想

1 评论

  1. 组件化开发

回复 张博宇 取消回复