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()，彷佛用計算屬性也行。那麼首選計算屬性。

老生常談的跟別人同樣的部分我就儘可能不提了，沒意思。先寫這麼多，回頭再添加。