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

在需要操縱資料時，將key屬性與v-for指令一起使用可以讓程式保持恆定且可預測是很有必要的。這樣Vue就可以跟蹤元件狀態，並對不同的元素有一個常量引用。在使用動畫或Vue轉換時，如果沒有key ，Vue只會嘗試使DOM儘可能高效。這或許會導致v-for中的元素出現亂序，或行為難以預測。如果我們對每個元素都有唯一的鍵引用，就能更好地預測Vue應用程式將如何精確地處理DOM操作。

2. 使用駝峰式宣告 props，並在模板中使用短橫線命名來訪問 props

最佳做法只是遵循每種語言的約定。在 JS 中，駝峰式宣告是標準，在HTML中，是短橫線命名。Vue 已經提供了駝峰式宣告和短橫線命名之間轉換，所以除了實際宣告它們之外，我們不用擔心任何事情。

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

在發出定製事件時，最好使用短橫線命名，這是因為在父元件中，我們使用相同的語法來偵聽該事件。所以為了確保我們各元件之間的一致性，讓你的程式碼更具可讀性，請在兩個地方都堅持使用短橫線命名。

4. 函式式元件

函式式元件是無狀態，它無法例項化，沒有任何的生命週期和方法。建立函式式元件也很簡單，只需要在模板新增 functional 宣告即可。一般適合只依賴於外部資料的變化而變化的元件，因其輕量，渲染效能也會有所提高。元件需要的一切都是通過 context 引數傳遞。它是一個上下文物件，具體屬性檢視文件。這裡 props 是一個包含所有繫結屬性的物件。

5. 重用相同路由的元件

開發小夥伴們常常會遇到多個路由解析為同一個Vue元件的情況。問題是，Vue出於效能原因，預設情況下共享元件將不會重新渲染，如果你嘗試在使用相同元件的路由之間進行切換，則不會發生任何變化。如果你依然希望重新渲染這些元件，就可以通過在 router-view 元件中提供 :key 屬性來實現。

6. $createElement

一般情況下，每個Vue例項都可以訪問 $createElement 方法來建立和返回虛擬節點。例如，可以利用它在可以通過v-html指令傳遞的方法中使用標記。在函式元件中，可以將此方法作為渲染函式中的第一個引數進行訪問。

7. 使用JSX

由於Vue CLI 3預設支援使用JSX，因此現在你可以使用JSX編寫程式碼。如果尚未使用Vue CLI 3，則可以使用 babel-plugin-transform-vue-jsx 獲得JSX支援。

8. 作用域插槽實現 UI 和業務邏輯的分離

我們常常會想複用一個元件的業務邏輯，但是不想使用該元件的 UI時，可以使用作用域插槽實現 UI 和業務邏輯的分離。作用域插槽大致的思路是將 DOM 結構交給呼叫方去決定，元件內部只關注業務邏輯，最後將資料和事件等通過 :item ="item" 的方式傳遞給父元件去處理和呼叫，實現 UI 和業務邏輯的分離。再結合渲染函式，就可以實現無渲染元件的效果。

以上就是Vue看了就會的8個小技巧的詳細內容，更多關於vue 技巧的資料請關注我們其它相關文章！