[譯] 怎樣更好地使用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。