6条vue代码重构原则

最近抽空阅读了《重构_改善代码既有的设计》，再结合项目实际的实际情况总结了六条常用的代码重构原则

1. 当有一大段代码是为了达成一个相同目的的时候将其抽离成一个单独的函数，并用名称和注释解释它的用途 这种情况多出现在if else和switch语句中，因为判断语句所表达的意思需要结合整个判断来理解，单个if或者case中代码过多会增加理解的难度。函数是一样的道理，过长的函数也需要分解。

2. 当一个新功能可在另一处地方复用，或者逻辑较复杂时，抽离成一个单独的组件 在一次code review中一位同事的代码被询问，为什么一个下拉选择功能没抽成组件而是在不同的页面被复制粘贴了三次。原因在一开始这个功能只有一个页面被用到，但是随着需求的迭代用到的地方越来越多，而他图方便每次都选择了复制而不是重构成组件。这看似是比较省事，但是如果接下去有需求要修改这个下拉选择组件，那么他就要修改三个地方，自测也要进行三次。
   当功能逻辑比较复杂，代码量较大时也要抽成组件，不能让单个功能影响到整个页面代码的可读性。如果抽出来的组件代码量很大，且能够再分解成小组件也需要进行分解。
3. 当一个变量数值需要经过计算或者格式化时用computed或者函数替代 长段的计算逻辑会增加阅读难度
4. 分解过于复杂的判断条件，逐一分解到函数中 同样，长短的判断逻辑也会增加阅读难度，也会让代码显得混乱
5. 善用三元表达式，和return简化判断条件语句

6. vue实例中常用属性排序:

name
componets
props
data
computed
watch
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
method

按照官方推荐风格，components放在第二位方便引入组件，接下去是props，data和computed方便查看变量。生命周期函数中的逻辑全部抽离成函数，写上注释。这样做的目的是方便阅读者快速了解代码功能。