vue -- 7 個 有用的 Vue 開發技巧

 

 

1 狀態共享

隨着組件的細化，就會遇到多組件狀態共享的狀況， Vuex固然能夠解決這類問題，不過就像 Vuex官方文檔所說的，若是應用不夠大，爲避免代碼繁瑣冗餘，最好不要使用它，今天咱們介紹的是 vue.js 2.6 新增長的 Observable API ，經過使用這個 api 咱們能夠應對一些簡單的跨組件數據狀態共享的狀況。

以下這個例子，咱們將在組件外建立一個 store，而後在 App.vue組件裏面使用 store.js 提供的 store和 mutation方法，同理其它組件也能夠這樣使用，從而實現多個組件共享數據狀態。

首先建立一個 store.js，包含一個 store和一個 mutations，分別用來指向數據和處理方法。

而後在 App.vue裏面引入這個 store.js，在組件裏面使用引入的數據和方法

2 長列表性能優化

咱們應該都知道 vue會經過 object.defineProperty對數據進行劫持，來實現視圖響應數據的變化，然而有些時候咱們的組件就是純粹的數據展現，不會有任何改變，咱們就不須要 vue來劫持咱們的數據，在大量數據展現的狀況下，這可以很明顯的減小組件初始化的時間，那如何禁止 vue劫持咱們的數據呢？能夠經過 object.freeze方法來凍結一個對象，一旦被凍結的對象就不再能被修改了。

另外須要說明的是，這裏只是凍結了 users的值，引用不會被凍結，當咱們須要 reactive數據的時候，咱們能夠從新給 users賦值。

3 去除多餘的樣式

隨着項目愈來愈大，書寫的不注意，不天然的就會產生一些多餘的 css，小項目還好，一旦項目大了之後，多餘的 css 會愈來愈多，致使包愈來愈大，從而影響項目運行性能，因此有必要在正式環境去除掉這些多餘的css，這裏推薦一個庫purgecss，支持 CLI、JavascriptApi、Webpack 等多種方式使用，經過這個庫，咱們能夠很容易的去除掉多餘的 css。

最終產生的 purgecssResult結果以下，能夠看到多餘的 a和 ul標籤的樣式都沒了

4 做用域插槽

利用好做用域插槽能夠作一些頗有意思的事情，好比定義一個基礎佈局組件A，只負責佈局，無論數據邏輯，而後另外定義一個組件B 負責數據處理，佈局組件A 須要數據的時候就去 B 裏面去取。假設，某一天咱們的佈局變了，咱們只須要去修改組件A 就行，而不用去修改組件B，從而就能充分複用組件B 的數據處理邏輯，關於這塊我以前寫過一篇實際案例，能夠點擊這裏查看。

這裏涉及到的一個最重要的點就是父組件要去獲取子組件裏面的數據，以前是利用 slot-scope，自 vue 2.6.0 起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。

好比，咱們定一個名爲 current-user的組件：

父組件引用 current-user的組件，但想用名替代姓（老外名字第一個單詞是名，後一個單詞是姓）：

這種方式不會生效，由於 user對象是子組件的數據，在父組件裏面咱們獲取不到，這個時候咱們就能夠經過 v-slot來實現。

首先在子組件裏面，將 user做爲一個 <slot>元素的特性綁定上去：

以後，咱們就能夠在父組件引用的時候，給 v-slot帶一個值來定義咱們提供的插槽 prop 的名字：

這種方式還有縮寫語法，能夠查看獨佔默認插槽的縮寫語法，最終咱們引用的方式以下

5 屬性事件傳遞

寫太高階組件的童鞋可能都會碰到過將加工過的屬性向下傳遞的狀況，若是碰到屬性較多時，須要一個個去傳遞，很是不友好而且費時，有沒有一次性傳遞的呢（好比react裏面的 {...this.props}）？答案就是 v-bind和 v-on。

舉個例子，假若有一個基礎組件 BaseList，只有基礎的列表展現功能，如今咱們想在這基礎上增長排序功能，這個時候咱們就能夠建立一個高階組件 SortList。

能夠看到傳遞屬性和事件的方便性，而不用一個個去傳遞

6 函數式組件

函數式組件，即無狀態，沒法實例化，內部沒有任何生命週期處理方法，很是輕量，於是渲染性能高，特別適合用來只依賴外部數據傳遞而變化的組件。

寫法以下：

1. 在 template標籤裏面標明 functional

2. 只接受 props值

3. 不須要 script標籤

7 監聽組件的生命週期

好比有父組件 Parent和子組件 Child，若是父組件監聽到子組件掛載 mounted就作一些邏輯處理，常規的寫法可能以下：

這裏提供一種特別簡單的方式，子組件不須要任何處理，只須要在父組件引用的時候經過 @hook來監聽便可，代碼重寫以下：

固然這裏不只僅是能夠監聽 mounted，其它的生命週期事件，例如： created， updated等均可以.