[譯] 怎樣更好地使用 Vue：我在新工作中遇到的一些問題清單

• 原文地址：How not to Vue: A list of bad things I’ve found on my new job
• 原文作者：Anton Kosykh
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：sophiayang1997
• 校對者：kezhenxu94 xxholly32

下面列舉一些人的做法。

不久之前，我找到了新工作。而且當我第一次看到程式碼庫的時候，這真是嚇壞我了。因此我想在這裡展示一些你應該避免在 Vue.js 應用程式中出現的程式碼。

data/computed 中的靜態屬性

我們沒有理由將靜態屬性傳遞給 data，特別是 computed。當你這樣做時，Vue 將其宣告為響應式屬性，但是這是不必要的做法。

DON’T. phone 和 city 的響應性毫無用處。

DO. 將靜態屬性傳給 $options。它更加簡短，而且不會做多餘的工作。

考慮將非響應式（non-reactive）的資料轉變為響應式（reactive）

請記住：Vue 不是神通廣大的。Vue 並不知道你的 cookies 何時才會更新。

我提到 cookies 的原因是：我的同事曾經花兩個小時去搞清楚為什麼他的計算屬性沒有更新。

DON’T. 計算屬性應該只基於 Vue 的響應式資料去使用。否則，它將不會起作用。

DO. 手動更新你的非響應式資料。

此外，我建議你不要在計算屬性中使用任何邊資料（side-data）。你的計算屬性中不應該有任何副作用。這樣做會為你節省很多時間。相信我。

只應該被呼叫一次的混入（mixins）物件

一聽到我說 mixins 很好，馬上就有人關閉這篇帖子了… 其實 mixins 在一些情況下還是很好用的：

1. 建立可以修改 Vue 例項的外掛，提供新功能。
2. 在不同的元件或者整個應用程式中使用通用的特定方法。

除非有人在 mounted 鉤子上註冊了一個執行效率非常緩慢的全域性混入物件。為什麼不推薦這樣做呢？因為在每個元件掛載時該全域性混入物件都會被呼叫，但原則上它只能被呼叫一次。

我不會展示這一段程式碼。相反，為了使它更清晰，我會給你一個更簡單的例子。

DON’T. 避免在混入中（mixins）中執行此操作。它會在每個元件掛載時被呼叫，即使你並不需要這樣做。

DO. 在根例項中執行此操作。那麼它只會被呼叫一次。你仍然可以使用 $root 訪問結果。

setTimout/setInterval 的不正確使用

在一次面試中，我團隊中一個前端開發者問我是否可以在元件中使用 setTimout/setInterval。我回答“可以“，但還沒來得及解釋如何正確使用它，我就已經被指責不夠專業了。

現在我必須維護某一個人的程式碼，因此我將這一段文字獻給他。

DON’T. 你可以使用間隔（intervals）。但是如果你忘記使用 clearInterval，就會在元件解除安裝時出錯。

DO. 在 beforeDestroy 鉤子中使用 clearInterval 來清除間隔。

DO. 如果你不想這麼麻煩，可以考慮使用 vue-timers。

變異的父例項

這是 Vue 中我最不喜歡的設計了，真心希望有一天能把它移除（雨溪，拜託你了）。

我沒有見過使用 $parent 的真實用例。它會使元件變得更加呆板，並且會產生一些讓你意想不到的問題。

DON’T. 如果你試圖去改變 props，Vue 會警告你，但是如果你通過 $parent 去改變 props，Vue 將無法檢測到。

DO. 使用事件觸發器（events emitter）去監聽事件。此外，v-model 只是 value 屬性和 input 事件的語法糖。

DO. Vue 還有一個語法糖：.sync 修飾符用於更新 update:prop 事件中的 prop。

If/else 表單驗證

當我發現一些需要手動驗證的表單時我感到非常困惑。它會產生大量無用的樣板程式碼。

DON’T. 我在新專案中被類似的程式碼嚇壞了。不要再這樣愚蠢了，這個問題有很多可行的解決方案

DO. 請使用 vuelidate。對於每個欄位只需要一行驗證規則，多麼整潔且具有宣告性的程式碼。

DO. 我也製作了一個允許你使用一個物件宣告表單資料和驗證的小外掛。

最後

這些當然不全是 Vue.js 初級開發者的罪過，並且我相信這份問題清單可能是無限的，但我認為這份清單已經足夠了。

那麼，如果你在 Vue.js 專案中看到了什麼“有趣”的東西，可以在這裡回覆我 :)。

謝謝閱讀！記住不要重複愚蠢的錯誤 :) 特別鳴謝為 carbon.now.sh 做出貢獻的人。奶思！

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。