Vue项目中可能存在的问题和解决方案

相比其他的框架来说，Vue中更容易产出不合格代码；因为Vue中的options就是一个大对象，导致js本身的很多检测都失效了，比如一个函数没有用到的话会“变灰”，template中代码提示比较少，较多的mixins等等；遇到不合格代码，大多数人第一反应就是这谁写的代码这么差，其实大多数公司大多数人至少曾经都写过一些不合格代码，有不合格代码很正常，问题在于怎么快速梳理出业务逻辑，防止在迭代新需求时引发bug，在富有余力的情况下可以进行局部重构，渐进式优化屎山代码；

那么，接下来可以看看前端项目不合格的地方，大概有以下几种：

一、目录杂乱

src/
├── App.vue
├── api
├── components
├── constants
├── main.js
├── pages
├── router
├── services
├── utils
│   └── hash.js
└── views

看一下上面的目录，views和pages是类似的含义，都是指的路由对应的页面，而api和services也是类似的都是存放后端接口的封装，同时存在这几种文件夹说明项目初期没有规范，每个人按照自己的规范去开发，导致有的人页面写在views里面，有的写在pages里面，建议这几个相似含义的目录只保留一个；

它的危害在于让后续接手的人要频繁切换文件夹去看不同页面的逻辑，并且不知道后续自己应该在哪个文件夹开发自己的页面，导致恶性循环。

二、组件不拆分

Vue将template、script、style组合在一个.vue文件中，这天然就会使得每一个.vue文件的行数会非常多，难以维护，Vue2中一个最明显的屎山就是几千行、甚至上万行的代码，用专业的术语来讲就是不符合单一职责原则，一个组件应该只干一件事情，一个函数应该只处理一个逻辑，剩下的逻辑交给其他函数或者组件来做；时刻牢记“SOLID”原则是远离屎山的第一心法；

三、复杂的表达式

<div
    class="files"
    :class="{ disabled: !isAllowRead && hasNotPassed && aaa && (bbb || ccc) }"
    @click="toDetail()"
  >
  <a/