Vue 2 业务代码的最佳实践

记录一下Vue 2 业务代码的最佳实践

1. 禁用Watcher

为何禁用Watcher？ 在我看来，Watcher在Vue中彻底是多余的存在。它的缺点不少，优势几乎没有。 先说优势，优势就是写代码快。不须要逻辑，什么都是Watch就好了。好比，我在咱们合同工的代码中看到不少Watcher，这对于快速开发确实是优势。由于不须要过多考虑逻辑，只要值变了，就执行函数就好了。 至于缺点有不少：

• 错误的暗示一个Watcher自带暗示：被Watch的变量能够被任何东西改变，换句话说你不知道这个值将会被什么改变。这在维护的时候很是麻烦，你要常常通读代码来判断如何修改相关的业务。 如何解决？ 去掉Watcher，用v-if控制组件载入并在子组件的Created()钩子内处理相关业务。另外要善用Computed，善用emit派发event来改变值。这样数据流比较清晰。总之尽可能作到每一个值的改变都有迹可循。
• 混乱嵌套的Watcher只要多用Watcher就能创造更多Bug，听起来像一个优势，对程序员来讲能够多建立点Bug ticket。这种代码是这么写的，先Watch A,再Watch B而且在修改B的时候顺便修改一下A的属性，而后在修改A的时候顺便在修改一下B的属性，最好再修改一个八杆子打不着的变量C，而后再Watch下C再改一下其它值。还不够完美，在滥用Wather这方面有人确定能比我写的专业。
• 难于测试对，就是在写测试的时候会遇到不少困难，有时候Watcher在测试内是不能被激活的。这里再也不赘述。固然若是你不写测试程序就没有这个问题。

2. 禁用Vuex

Vuex， 又是一个生造出来的东西。什么大项目用，中小项目不用之类的说法都是错误的。不懂的人最喜欢这个忽悠，你细问他有说不出个因此然来。个人结论是什么代码都不要用。 这个东西是过分设计以及设计错误。为何这么说，一旦你使用Vuex了，就表明你的组件设计必定出了问题。固然这么一顿批评它的缺点到底在哪里呢？

• 逻辑混乱 有人确定说这东西用好了就怎么怎么样，用很差才会怎么怎么样。错，我告诉你这东西无法用好，不要用。随着代码量的增长Vuex会使你的代码逻辑变得很是混乱。这个Vuex就是一个全局变量，并且满天飞。维护的时候要花不少时间，尤为是多个程序员维护一份代码，本身搞本身的，过了一段时间代码就会变得无法看。并且没人敢乱改，一改可能就全塌了。
• 难于测试 写测试的时候要引入更多多余的mock。并且有些在Vuex里面触发的事件根本没法测试致使你没法写出正确的测试。若是你在测试内派发事件，那么这个测试就是无效测试。由于你的代码逻辑改了测试仍是可以经过。

3. 禁用Mixin

Mixin又有什么问题？ Mixin最大的问题就是带来代码的逻辑混乱。使用了Mixin的代码维护更加困难，还不如export函数易于阅读。 若是是mix组件的hook那将是个灾难。 我以为Mixin只有一个时候能够用用就是多组件共用同一个Prop的时候。其它时候真的能够不用了。

4. 尽可能不要在HTML内用Form tag

会引发错误的提交而且致使Vue地址栏胡乱添加问号。

5. 多用Computed计算属性

这里的多用意思是，你以为不能用的时候也要想办法用。 Computed属性有不少优势。它就像一个只读变量（若是咱们不用setter的话）。计算属性的存在给Vue程序员减小了不少心智负担。你会发现有时候能够把变量放入Data()，彷佛用计算属性也行。那么首选计算属性。

老生常谈的跟别人同样的部分我就尽可能不提了，没意思。先写这么多，回头再添加。