开篇

• 
  
• 最近在合并几个项目的代码，把功能拼一拼简称项目拼多多。
  
• 但是几个系统都没有 eslint 之类的东西，我也不知道怎么想的居然想给 拼多多 加上代码检查。
  
• 我还真的干了，于是就有了下面这些奇奇怪怪甚至有些可爱的代码。算是给大家做个反面教材。
  

一些示例

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

循环不要声明无用的变量

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

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

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

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

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

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

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

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

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

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

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

• 
  
• 组件在使用 v-for 遍历时 需要使用 v-if 判断是否加载，可以使用计算属性先处理一遍再把数据用于v-for遍历。
  
• 下边这种写法，我猜测可能是数据不存在则不展示，但是 v-for 没有数据本身就不会展示啊！
  

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

它是想做什么呢？

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

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