如何写出易于维护的Vue代码(踩坑经验)
目录
前言
在开发时你心里是否在想着:把功能实现就行了!如果是,那么该文章比较适合你。
“把功能实现就行了”很大可能会增加后期维护的成本!
如何写出易于维护的 Vue 代码?踩坑经验告诉你,请查收!
正文
data 属性数量不宜过多
你是否在开发时,为了自己容易分辨而尝试在 data 中定义各种属性?你是否有过反复修改代码,最后有些属性用不到,但是也不敢删除?你是否有过“复制粘贴”其他页面代码,data 属性懒得删除,直接添加新属性?如果是,那么恭喜你,成功入坑!
对于 Vue2 来说,双向绑定是通过遍历劫持 data 中的属性来实现,越多的属性,代表着内部需要做更多的操作,即性能、效率越低。
暂且不论性能,属性越“丰富”,越不容易理解。如果打开一个页面,前 100 行都是 data 属性,我会望而生畏,甚至没有写下去的欲望。
有句话说的很好:
良药与毒药的区别在于剂量。有少量的全局数据或许无妨,但数量越多,处理的难度就会指数上升。
不好示范:
data 属性不宜过多,添加有必要或有代表性的属性, 让代码更加容易理解。
组件入参数量不宜过多
data 属性数量过多,我们可以使用注释来帮助理解。但是组件的入参,即 props 数量过多却让理解的成本更上一层。你首先得先理解父组件内绑定的值是什么,再理解子组件内的入参用做什么。
不好示范:
更有甚者,让父组件跟子组件的名称不一致,理解难度再翻一番。
看到这样的代码,我心想:为啥让我来维护?毁灭吧,累了。
mixins 与 业务代码低耦合
我们知道,合理使用 mixins 可以帮助我们更好地复用组件与理解逻辑。但是,如果 mixins 与业务代码高耦合,这将得不偿失。
当 mixins 中的很多属性与方法都与组件的相同,更有甚者,让 mixins 去调用组件的方法或者变量,导致多出了很多引用,这不是拿起石头砸自己的脚吗?此刻的 mixins 意义何在?
不好示范:
tips:mixins 属性和方法尽量加上特殊前缀与组件方法区分,理解更容易,复用更简单。
建议封装纯函数
如果有一个很重要的业务组件可读性很差,势必要小步快跑的迭代重构,这种情况也不用怕,我们一个微小的习惯就可以让这件事情变得简单,那就是封装纯函数方法。
纯函数的好处是不引用其他变量,可以轻易的挪动和替换;让每个方法尽量不引用 data 属性,这样可以随时迁移或替换该方法,当然,更不要在方法里引入 mixins 里的属性和方法,保持函数的“单纯”。
数据结构尽量简单
数据结构越复杂,越不容易理解,后期维护成本就越高。
数据结构尽量减少循环嵌套与递归遍历,在必要的复杂块添加易于理解的注释。
不好示范:
越复杂,最后有可能连自己都看不懂,更别说其他人了,何必呢?
保持良好的注释习惯
你不写注释,别人看起来费力;别人不写注释,你看起来费力。换位思考,你就知道写注释的重要性了,大家好才是真的好。
合理封装 mixins 与 组件
如果你是前端开发,但是你从没封装过可重用的 mixins 或组件,那得抓紧了。合理封装组件,是前端开发人员的必备技能,它可以帮助我们减少代码冗余,提升开发效率,降低理解与维护成本,何乐而不为?
总结
以上就是一些踩坑经验,希望能够帮助大家,一起写出更易于维护的代码!
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 实现微信扫码登录功能(项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
- Vue - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储,最新阿里云 SDK 上传音频、视频、图片、文档、office 等(保姆级详细示例源码教程,每行代码都有注释小白一看就懂)
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- 如何在 Vue 项目中,通过点击 DOM 自动定位VSCode中的代码行?(React 也适用)
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- 分享几个简单的技巧让你的 vue.js 代码更优雅
- vue页面跳转
- Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue
- vue-router 之 keep-alive路由缓存处理include+exclude
- vue-cli · Failed to download repo vuejs-templates/webpack: self signed certificate in certificate ch
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- Vue富文本编辑器的使用vue-quill-deitor
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue中给请求到的数据对象加属性问题
- 浅析Vue3 CompositionAPI如何替换Vue Mixins:mixin的缺点(命名冲突、隐式依赖)、CompositionAPI如何解决这些缺陷(代码提取、代码重用)
- Vue之双向数据绑定
- vscode快速生成vue代码---创建Vue代码模板
- Django+Vue项目学习第二篇:vue项目创建
- vue-解决Vue打包上线之后部分CSS不生效的问题
- WTM(基于Vue)项目发布记录
- vue中使用better-scroll实现菜单和列表联动的滚动效果,附完整演示代码,(可直接复制)
- Vue路由和路由器简介
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用