Vue進階：分享在Vue開發的6個技巧
Vue.js是我比較喜歡的前端開發框架，這有很多原因。我喜歡它提供的簡單性，強大的功能以及出色的性能。
我開始使用Vue是因為一開始覺得它很容易。一直用它，一直在提高，越來越執著去追求最佳的實踐。本文分享在vue進階過程中的6個技巧。
1. 完全理解響應式
響應式如何運作
在前端開發庫和框架中，響應式是一個簡單的概念。但是，要深入了解它的工作原理可能很困難。但這很值得你花時間。
這是一個小例子：
<h1>{{ name }}</h1>
當name的值更改時，UI將相應更新。這是解釋響應式的非常基本的方法，但是有許多更高級的示例可以幫助您了解其工作原理。
響應式出問題的地方
如果您要訪問對象中的屬性，則可能會出錯，如以下示例中所述：
<template>
<div>
<p>{{ myObject.message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myObject: {},
};
},
mounted() {
this.myObject.message = "Hello";
},
};
</script>
在上面的示例中，在data()中將myObject定義為空對象 {}。在后面給myObject.message一個賦值：Hello。
這可能會導致{{myObject.message}}在收到值的變更的時候也從不顯示任何內容。這是為什么？
這是因為Vue開始不知道myObject.message屬性的存在，因此無法對其值的變化做出相應的UI響應。
如何解決呢？
有兩種方法可以確保Vue對myObject.message屬性中的更改做出UI響應。最簡單的方法是在定義的時候就賦予相應的結構，如下：
myObject: {
message: ""
}
如果data()中存在myObject.message，則Vue將偵聽并對其值的更改做出UI響應。
另一種方法是完整的對整個對象進行重新賦值，如下：
this.myObject = {message: "Hello"}
簡而言之，要讓VUE監聽對象的屬性值的變更并做出相應的響應，需要在
data()方法中定義好屬性，或者每次更新的時候對整個對象進行更新，而不是對象某個屬性。
通過很好地了解反應性，您可以：
- 調試UI不按預期更新的場景。
- 確定何時更新和重新渲染視圖。
- 了解如何計算計算出的屬性。
- 測量需要一些CPU工作量才能進行計算的無功值的成本（例如，表格條件）。
2.父子組件通訊的最佳實踐
Vue最吸引我的是靈活的組件設計，組件之間如何互相通信共享數據呢？常見的問題是如何將數據從子級傳遞到父級組件？或者，當父組件發生更改時，如何確保子組件得到相應更新？
解決組件之間通訊的最佳方式是使用props。props將數據從父級傳遞給子級組件。它們是不可變的，可以有許多類型，例如字符串、布爾值、數組、對象等。
<component :message="myObject.message" />
props形成單向數據流，這意味著只要myObject.message在父組件中發生更改，消息props就會相應地更新。
在子組件定義的props屬性是不可變的，不能去更改它們的值，并且這樣不會導致父組件觸發更新，只會導致vue警告。
那么如果將子組件的數據傳遞到父組件呢？這個時候就需要用到事件。
<!-- 父級組件代碼 -->
<template>
<div>
<child-component @button-clicked="processUpdate" />
</div>
</template>
<script>
export default {
methods: {
processUpdate(value) {
console.log(value);
}
}
}
</script>
<!-- 子級組件代碼 -->
<template>
<button @click="notify">Notify Parent</button>
</template>
<script>
export default {
methods: {
notify() {
this.$emit('button-clicked', true);
}
}
}
</script>
可以使用$emit將值通過事件從子組件傳遞到父組件。可以使用v-on:或@以及事件的名稱（在本例中是@button-clicked）來偵聽來自父組件的事件。使用$emit，可以傳遞一個或多個值，它們可以是任何類型的值。
3.性能瓶頸優化
緩慢的應用程序讓人頭疼，作為軟件開發人員，我們的工作是確保我們的應用程序運行平穩。在編寫Vue應用程序時，很容易陷入某些陷阱，所以要從初學者到高級，需要很好地理解它們并能夠處理它們。
內存泄漏
內存泄漏是Web應用程序中常見的性能問題。即使Vue本身不會無故導致內存泄漏，也可以通過合并第三方庫或編寫錯誤的代碼來實現。在創建單頁應用程序（SPA）時避免內存泄漏尤為重要，因為從設計上講，用戶不會刷新瀏覽器，因此該應用程序必須執行所有垃圾回收。
在這方面Vue還是做得不錯，官方有如何避免內存泄漏的指南，強烈建議從事vue相關的開發人員閱讀。
渲染成本
諸如React和Vue之類的前端庫和框架使我們變得“懶惰”，看不到渲染時到底發生了什么。只使用v-for并期望一切正常。
問題在于很難理解渲染的“成本”是多少。Vue應用程序可能有很多出乎意料的方式來帶來高昂的渲染成本：
- 產生了太多的DOM元素。
- 頁面更新太頻繁。
- 使用了需要大量時間進行渲染的第三方組件。
在許多可能的情況下，應用都會產生高昂的渲染成本，結果，用戶將遇到延遲帶來的等待。
優化事件處理
與嚴格的Vue相比，這與JavaScript的關系更大，但無論如何都要注意。有些事件可能觸發得太頻繁了。如果添加scroll偵聽器或@mouseover事件，則事件處理程序可能會被調用多次。
如果事件處理程序執行的不多，則可能不是問題。但是，如果事件處理程序執行大量計算并花費時間來運行，則可能會導致應用程序嚴重延遲。發生這種情況的原因是滾動、鼠標懸停和其他事件每秒可以觸發事件處理程序數十次。
解決方案是在事件處理程序中使用throttle（節流）或debounce（防抖）函數，以限制事件處理程序執行實際計算的次數。Lodash包含這兩個功能，并提供了使用它們的簡便方法。強烈建議嘗試一下，同時也強烈建議使用這個腳本庫。
4.了解Vue生態系統
要想在Vue開發方面取得進展，必須了解組成Vue生態系統的包和組件。大多數應用程序至少需要以下一種，但要掌握這個框架，至少應該熟悉以下三種。
Vuex
大多數現代前端應用程序，尤其是單頁面應用SPA，都依賴于某種狀態管理。Vuex是Vue應用程序的官方狀態管理庫，與官方的Vue開發工具集成得很好。
它充當一個集中式存儲區，所有組件都可以訪問該存儲區，以獲取或更改全局應用程序數據。組件可以并且應該擁有本地數據，但是對于應用程序來說，使用狀態管理是必須的，因為它們變得更加復雜，而且多個組件依賴于相同的全局數據。
Vue Router
使用Vue而不使用Vue路由器的情況可能很少，但在某些項目中看到過這種情況。對于熟悉Vue的大多數人都已經熟悉Vue路由器了，所以在這就不講細節。學習vue-router是創建SPA應用程序的必要條件，而SPA應用是大多數現代前端應用程序的必經之路。
Vue SSR
要真正讓自己脫穎而出，應該通過使用官方的Vue庫或學習Nuxt.js來學習SSR。當瀏覽器應用程序的性能開始下降，或者當你不能依賴用戶的設備來處理渲染，最好在服務器端進行渲染時，服務器端渲染的需求就會出現。它有助于優化時間到內容-特別是在緩慢的設備或緩慢的互聯網-它對SEO也比較友好。
5.正確使用組件
對于缺乏經驗的Vue開發人員，容易犯的錯誤是他們構造大型組件。很多時候，Vue應用程序僅包含一個或幾個大型組件即可完成所有工作。我覺得這不是構造組件的好習慣。
項目做多了就越會意識到將應用程序結構化為更小的組件的重要性，每個組件都可以很好地完成一件（或幾件）事情。使用較小的組件有利于應用程序的原因有很多：
- 可以在整個應用程序中重用小型組件。
- 代碼更簡潔，更有條理。
- Vue可以在
v-for循環中更有效地渲染子組件。
6.學習高級指令
除了v-for、v-if以及其他常用的指令，Vue還有有一些指令是不常見的，但仍然是非常有用的，需要去了解學習。
v-once
使用v-once一次輸出一個值并將其設為非活動狀態。這意味著在隨后的更改中，該值將不會再次呈現。
<span v-once> {{name}} </ span>
事件修飾符
對于v-on事件，可以使用一些非常方便的修飾符。經常使用的一個是@click.prevent，它會自動調用click事件的preventDefault()。
<a href="#" @click.prevent="processClick">點擊我</a>
自定義指令
Vue允許注冊自己的自定義指令，如果發現自己在整個應用程序中一次又一次地復制相同的行為，那么創建一個可重用的自定義指令是很有意義的。
保持練習
閱讀、學習并確保做好筆記，在項目中實踐，即使今天對Vue的掌握只邁出了一小步，但也比昨天有進步。
