关于Vue组件化开发的思考

lemon 发布于2019-08-26 11:34 / 281人阅读

摘要：因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件然而我才发现这个想法是有问题的。联动思考悟缘起于最近的一个表单开发，页面上有个是联动菜单的选项。两个组件放在不同的板块内，相互独立，方便管理和维护。

今天在家躺了一天，直到晚上才考虑清楚，当人没有明确目标的时候，太容易被环境影响了。目标需要切合实际，至于和实际之间的距离，取决于当前认知的正确和全面。

既有认知（误）

一般说到组件，我首先想到的是弹窗，其他就大脑空白了。
因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件～

然而我才发现这个想法是有问题的。
我发觉可能从意识上把Vue的组件和UI库的组件（弹窗之类的）混淆了。。。

联动思考（悟）

缘起于最近的一个表单开发，页面上有2个是联动菜单的选项。
首先想到的是，这个样式和选择地址的那个联动菜单，完全一样哈～
（废话，同一个项目当然要保持ui风格的相同啊！）
不过差别在于我这个是一个1级一个2级，地址那个是4级的.

然后我就想着把那个地址的组件引进来用，发现这是个写死4级的

这个时候我只想到2种办法
1，分别改写成1级选项和2级选项的2个组件（好像比较low）
2，引用4级联动组件，改写成可选1级选项或2级选项（有点麻烦，到时候还要测地址没被我改坏）
3，重写一个可以通用无限联动菜单（方便可选级的）

最后选了3，自己重新搞了个。

至于为什么没有整合2，主要考虑到这两个组件所处的业务页面不同逻辑也有些差异：
1获取列表的逻辑可能不同，是一次性获取4级还是每次只获取1级或2级，
这个不确定的话，做成通用组件就都要处理了（强行抽取公用部分好麻烦啊）
2我这个是直接弹选项的，地址那个是跳新页面再点击弹选项的
我这个可以父子组件传递数据，地址那个用了vuex（非父子,跳页了）
总之就是实现成本和维护成本高，复用价值没那么高。。。（从利用率出发）

相当于2个页面都各自有一个样式相同逻辑不同的组件。
这完全是2个组件～
复制其通用样式部分，在各自内部实现其业务逻辑。
两个组件放在不同的板块内，相互独立，方便管理和维护。

更新认知（得）

这个时候再结合vue组件化的图来看会清楚
对于组件化开发
分治（自有业务逻辑）比复用（相同逻辑）更为重要！
复杂的业务逻辑配合vuex更方便实现组件化～

所以我理解组件化的组件是应该泛指是高内聚低耦合（某phper讲给我的专业名词，不知道放这用对不对哈）的～

私有云海外云主机 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107160.html

vue开发微信商城项目总结之六--关于vuex的思考

先对项目进行一下简单的介绍 vue开发微信商城项目总结之一–项目介绍项目开发初期，由于项目比较着急上线，前端的框架在选型上比较仓促，只是因为vue学习成本较低，就选了它，没有什么别的原因，之前看过angular2一段时间，又趁着周末看了两天vue，就仓促开发，所以埋下了很多坑，项目（项目目前没有对游客开放，是2B2C的模式）上线后，回头填坑，发现了很多问题，因为之前一直是基于Jquery模式的...

PrototypeZ 2019-08-21 17:08 评论0 收藏0
关于Vue生命周期的思考[zzky]

摘要：关于生命周期的思考关于组件生命周期，官方图示在开发过程中遇到关于生命周期的问题，整理分享下跳转同名路径的问题问题来自跳转同名路径的问题在社区交流中对于新手经常遇到这个问题。如何强制更新组件的生命周期解决办法是数据更新的时候。关于Vue生命周期的思考关于Vue组件生命周期，官方图示： showImg(http://vuejs.org.cn/images/lifecycle.png);...

zilu 2019-08-19 17:56 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
Vue2.0思考一

摘要：原创此文章是本人初步理解关于的模式父子组件通信生命周期计算属性方法及侦听器的记录笔记。（原创）此文章是本人初步理解关于Vue的MVVM模式、父子组件通信、生命周期、计算属性、方法及侦听器的记录笔记。 MVVM模式 m（模型层）v（视图层）p（控制器） showImg(https://segmentfault.com/img/remote/1460000015851383); m（...

Yuanf 2019-08-23 10:36 评论0 收藏0
手拉手，用Vue开发动态刷新Echarts组件

摘要：静态组件开发因为被编程思想这篇文章毒害太深，所以笔者开发组件也习惯从基础到高级逐步迭代。静态组件要实现的目的很简单，就是把图表，渲染到页面上。实现动态刷新下一步我想大家都知道了，就是定时从后台拉取数据，然后更新父组件的就好。从几年前流行的jQuery插件，到现在React和Vue的组件，在业务需求的开发中抽象通用出通用的模块，一直都是一个对个人技术提高非常有帮助的事情。本文从一个真实...

justCoding 2019-08-22 15:36 评论0 收藏0