vue组件化开发的好处,基于vue的组件

　　本文主要详细介绍了Vue的组成。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　背景定义分类优势首屏加载优化组件之间的关系一般可以分为两类：常见使用场景可以分为三类：总结说到组件化，我所写的都是与组件化相关的。

　　当时我考了个A，运气！

　　话不多说，直接进入正文。对于组件化，可以从背景，定义，分类，优势，首屏加载优化，组件之间的关系等方面扯扯，哦不对，是阐述。

背景

　　说采取传统开发网页的方式去开发一个系统，在一定程度上会造成资源的严重浪费，编程代码的冗余等弊端，会给开发者增加功能、版本迭代、处理业务变更带来很大的不便。为了避免这些弊端，我们可以采用组件化设计来开发一个多人协作的项目，具有多种功能。组件开发带来的可维护性和可重用性，可以提高开发效率，降低代码耦合度。

定义

　　组件为可复用的 Vue 实例和new Vue 接收相同的选项，如数据、计算、观察、方法、生命周期挂钩等。组件的本质是产生虚拟DOM。Vue组件系统提供了一种抽象，这样我们就可以使用独立可复用的组件来构建大型应用，任何类型的应用程序接口都可以抽象为一个组件树。

分类

　　通用组件:带有通用性、复用性的通用组件，如输入框组件、按钮组件、单选框/复选框组件等。

　　业务组件:它有复用性，比如底部导航栏组件，区域选址组件，轮播组件等。可以提取并放置在全局组件中。

　　页面组件:一个页面属于一个组件，也可以由多个组件组成。如下图，组件只需要引入-注册-使用，比如列表页组件、详情页组件、个人页组件。

优势

　　组件化可以增加代码的可重用性、可维护性和可测试性。组件可以提高开发效率，方便重用(reuse)，简化调试步骤，提高项目可维护性，方便多人协同开发。比如在一个项目中，不同的组件按照不同的核心点进行划分，然后放在各自功能模块的文件夹中，使得组件之间互不影响，关系清晰，有利于后期的开发和维护，提高开发效率。

首屏加载优化

　　Vue每个页面组件都有对应的路由，所有的路由都写在routes.js文件中。当项目组件过多时，考虑Vue属于单页面应用(SPA)。虽然JS动态修改内容，但是资源只需要部分刷新，但是刚开始进入首页时，如果需要加载的组件过多，会造成长时间的白屏，所以路由可以懒加载，懒加载是延迟加载甚至是不加载，有利于减轻服务器压力。除了懒加载可以解决首屏加载慢的问题，其实还有很多优化方法，如下图所示：

组件之间的关系

总体上可以分为两大类：

　　父子组件之间的通信不是父子组件(兄弟组件、世代关系组件等)之间的通信。)

常见使用场景可以分为三类：

　　父子组件通信：

　　道具；$ parent/$ children；提供/注入；ref$attrs/$listeners

　　兄弟组件通信：

　　eventBus状态管理

　　跨级通信：

　　eventBusVuex提供/注入、$ attrs/$侦听器

　　组件之间的通信方式有8种，在实际开发过程中，最好需要掌握三四种，如下图所示。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。