求求你们了，对自己代码质量有点要求！

前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

开篇

• 最近在合并几个项目的代码，把功能拼一拼简称项目拼多多。

• 但是几个系统都没有 eslint 之类的东西，我也不知道怎么想的居然想给 拼多多 加上代码检查。

• 我还真的干了，于是就有了下面这些奇奇怪怪甚至有些可爱的代码。算是给大家做个反面教材。

一些示例

• ps 示例代码来源于网络社区。

循环不要声明无用的变量

image.png

不要在 template中写很长的判断、运算，因为有个东西叫做计算属性。

image.png

使用 getCurrentInstance 获取 proxy 时候，请仔细想想你真的需要吗？最重要的不要声明了但不使用它！

image.png

不要声明未使用变量函数！

• 当然可能有时候，业务变更忘记改了！如果是这样，那应该安装 eslint 并增加代码提交检查！

image.png

请在data 中声明所有已知变量及其子属性

image.png

请不要太随意的对文件进行命名

• 如果有疑问可以查看vue风格指南那里会有答案！

image.png

请不要写一些奇怪的逻辑，如果写了请写上注释，对于重复的东西，有必要进行提取，这会使代码更整洁。

image.png

如果你使用了 v-for 请记得加上 key 不然它就像没穿内裤一样会很难受！

image.png

一个组件是需要一个名字的，就像人一样！

image.png

image.png

不要混用 v-if、v-for，更不要像下图这样写！

• 组件在使用 v-for 遍历时 需要使用 v-if 判断是否加载，可以使用计算属性先处理一遍再把数据用于v-for遍历。

• 下边这种写法，我猜测可能是数据不存在则不展示，但是 v-for 没有数据本身就不会展示啊！

image.png

不要混合使用使用不同的操作符

image.png

它是想做什么呢？

• obj[next.id] 存在不做操作， 不存在赋值为 true 且执行 cur.push(next)

image.png

• 异步异步在在异步，我的滑板鞋

image.png

写vue的强烈建议查看官网的风格指南 猛击查看^[1]

关于本文

来源：唐诗

https://juejin.cn/post/7073049322656366622

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持