作者：Matt Maribojoc 譯者：前端小智 來源：medium

隨著 VueJS 的使用越來越廣泛，出現了幾種最佳實踐并逐漸成為標準。在本文中，主要分享在平時開發中一些有用資源和技巧，廢話少說，我們開始吧。

1.始終在 v-for 中使用 :key

在需要操縱數據時，將key屬性與v-for指令一起使用可以讓程序保持恒定且可預測。

這是很有必要的，這樣Vue就可以跟蹤組件狀態，并對不同的元素有一個常量引用。在使用動畫或Vue轉換時，key 非常有用。

如果沒有key ，Vue只會嘗試使DOM盡可能高效。 這可能意味著v-for中的元素可能會出現亂序，或者它們的行為難以預測。 如果我們對每個元素都有唯一的鍵引用，那么我們可以更好地預測Vue應用程序將如何精確地處理DOM操作。

<!-- 不好的做法--><div v-for=’product in products’> </div><!-- 好的做法 --><div v-for=’product in products’ :key=’product.id’>

2.在事件中使用短橫線命名

在發出定制事件時，最好使用短橫線命名，這是因為在父組件中，我們使用相同的語法來偵聽該事件。

因此，為了確保我們各組件之間的一致性，并使您的代碼更具可讀性，請在兩個地方都堅持使用短橫線命名。

this.$emit(’close-window’)// 在父組件中<popup-window @close-window=’handleEvent()’ />

3.使用駝峰式聲明 props，并在模板中使用短橫線命名來訪問 props

最佳做法只是遵循每種語言的約定。 在 JS 中，駝峰式聲明是標準，在HTML中，是短橫線命名。 因此，我們相應地使用它們。

幸運的是，Vue 已經提供了駝峰式聲明和短橫線命名之間轉換，因此除了實際聲明它們之外，我們不必擔心任何事情。

// 不好的做法<PopupWindow titleText=’hello world’ /> props: { ’title-text’: String }// 好的做法<PopupWindow title-text=’hello world’ /> props: { titleText: String }

4.data 應始終返回一個函數

聲明組件data時，data選項應始終返回一個函數。 如果返回的是一個對象，那么該data將在組件的所有實例之間共享。

// 不好的做法data: { name: ’My Window’, articles: []}

但是，大多數情況下，我們的目標是構建可重用的組件，因此我們希望每個組件返回一個惟一的對象。我們通過在函數中返回數據對象來實現這一點。

// 好的做法data () { return { name: ’My Window’, articles: [] }}

5. 不要在同個元素上同時使用v-if和v-for指令

為了過濾數組中的元素，我們很容易將v-if與v-for在同個元素同時使用。

// 不好的做法<div v-for=’product in products’ v-if=’product.price < 500’>

問題是在 Vue 優先使用v-for指令，而不是v-if指令。它循環遍歷每個元素，然后檢查v-if條件。

this.products.map(function (product) { if (product.price < 500) { return product }})

這意味著，即使我們只想渲染列表中的幾個元素，也必須遍歷整個數組。

這對我們來當然沒有任何好處。

一個更聰明的解決方案是遍歷一個計算屬性，可以把上面的例子重構成下面這樣的：

<div v-for=’product in cheapProducts’> computed: { cheapProducts: () => { return this.products.filter(function (product) { return product.price < 100 }) }}

這么做有幾個好處：

渲染效率更高，因為我們不會遍歷所有元素 僅當依賴項更改時，才會重使用過濾后的列表 這寫法有助于將組件邏輯從模板中分離出來，使組件更具可讀性

6.用正確的定義驗證我們的 props

可以這條是很重要，為什么？

在設計大型項目時，很容易忘記用于props的確切格式、類型和其他約定。如果你在一個更大的開發團隊中，你的同事不會讀心術，所以你要清楚地告訴他們如何使用你的組件。

因此，我們只需編寫props驗證即可，不必費力地跟蹤組件來確定props的格式

從Vue文檔中查看此示例。

props: { status: { type: String, required: true, validator: function (value) { return [ ’syncing’, ’synced’, ’version-conflict’, ’error’ ].indexOf(value) !== -1 } }}

7.組件全名使用駝峰或或者短橫線

組件的通用命名約定是使用駝峰或短橫線。無論我們使用哪咱，最重要的是始終保持一致。我認為駝峰方式 效果最好，因為大多數IDE自動完成功能都支持它。

# 不好的做法mycomponent.vuemyComponent.vueMycomponent.vue# 好做法MyComponent.vue

8. 基本組件應該相應地加上前綴

根據Vue樣式指南，基本組件是僅包含以下內容的組件：

HTML 元素 額外的基礎組件 第三方的UI組件

為這些組件命名的最佳實踐是為它們提供前綴Base、V或App。同樣，只要我們在整個項目中保持一致，可以使用其中任何一種。

BaseButton.vueBaseIcon.vueBaseHeading.vue

該命名約定的目的是使基本組件按字母順序分組在文件系統中。 另外，通過使用webpack導入功能，我們可以搜索與命名約定模式匹配的組件，并將所有組件自動導入為Vue項目中的全局變量。

單實例組件命名應該帶有前綴 The

與基本組件類似，單實例組件(每個頁面使用一次，不接受任何prop)應該有自己的命名約定。這些組件特定于我們的應用，通常是 footer，header或sider。

該組件只能有一個激活實例。

TheHeader.vueTheFooter.vueTheSidebar.vueThePopup.vue

10.保持指令簡寫的一致性

在Vue開發人員中，一種常見的技術是使用指令的簡寫。例如：

@是v-on的簡寫 : 是 v-bind 的簡寫 # 是 v-slot 的簡寫

在你的Vue項目中使用這些縮寫是很好的。但是要在整個項目中創建某種約定，總是使用它們或從不使用它們,會使我們的項目更具內聚性和可讀性。

11.不要在“created”和“watch”中調用方法

Vue開發人員經常犯的一個錯誤是他們不必要地在created和watch中調用方法。 其背后的想法是，我們希望在組件初始化后立即運行watch。

// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }

但是，Vue為此提供了內置的解決方案，這是我們經常忘記的Vue watch屬性。

我們要做的就是稍微重組watch并聲明兩個屬性：

1.handler (newVal, oldVal)-這是我們的watch方法本身。 2. immediate: true- 代表如果在 wacth 里聲明了之后，就會立即先去執行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行

// 好的做法methods: { handleChange() { // stuff happens }},watch () { property { immediate: true handler() { this.handleChange() } }}

12. 模板表達式應該只有基本的 JS 表達式

在模板中添加盡可能多的內聯功能是很自然的。但是這使得我們的模板不那么具有聲明性，而且更加復雜，也讓模板會變得非常混亂。

為此，讓我們看看Vue樣式指南中另一個規范化字符串的示例，看看它有多混亂。

//不好的做法{{ fullName.split(’ ’).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(’ ’)}}

基本上，我們希望模板中的所有內容都直觀明了。 為了保持這一點，我們應該將復雜的表達式重構為適當命名的組件選項。

分離復雜表達式的另一個好處是可以重用這些值。

// 好的做法{{ normalizedFullName }}// The complex expression has been moved to a computed propertycomputed: { normalizedFullName: function () { return this.fullName.split(’ ’).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(’ ’) }}

總結

這是12個最常見的最佳實踐，它們將使我們的Vue代碼更易于維護、可讀性更好、更專業。希望這些技巧對您有用（因為它們絕對是我一直想記住的東西）。

到此這篇關于12 種使用Vue 的最佳做法的文章就介紹到這了,更多相關Vue 最佳做法內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！