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 函數式組件
函數式組件，即無狀態，無法實例化，內部沒有任何生命周期處理方法，非常輕量，因而渲染性能高，特別適合用來只依賴外部數據傳遞而變化的組件。
寫法如下：
-
在
template標簽里面標明functional -
只接受
props值 -
不需要
script標簽
7 監聽組件的生命周期
比如有父組件 Parent和子組件 Child，如果父組件監聽到子組件掛載 mounted就做一些邏輯處理，常規的寫法可能如下：
這里提供一種特別簡單的方式，子組件不需要任何處理，只需要在父組件引用的時候通過 @hook來監聽即可，代碼重寫如下：
當然這里不僅僅是可以監聽 mounted，其它的生命周期事件，例如： created， updated等都可以.