『壹』 Vue組件傳值及頁面緩存問題
關於父組件的傳值類型和props更多的定義詳見官網 ： vue官網
（2）子組件向父組件傳值
（3）通過 chlidren等方法調取用層級關系的組件內的數據和方法。
有很多時候根據業務需求要在同級組件或頁面間傳值，此處提供以下幾種方法作為參考:
（1）通過router-link進行跳轉
（2） this.$router.push()
此方法同樣是有path+query和name+params兩種方式：
總結：使用query，傳輸的值會在url後面以參數的形式顯示出來，可以刷新頁面，數據不變，但會是頁面路由過長；而params只要一刷新傳遞的參數就沒了。
（3）LocalStorage緩存傳值
注意：簡單的小項目可以這么做，如果項目很大，建議直接用vuex。
（4）通過Vuex進行傳值
（5）發布訂閱模式（也叫eventBus或事件匯流排）
在Vue的原型上定義一個變數eventBus，所有所有Vue的實例或組件都將共享這個eventBus，可以用eventBus來發布自定義事件，然後在組件中用eventBus訂閱自定義事件。就可以實現傳值。
詳細講解可看 鏈接
（6）Vue.observable
index.vue組件中觸發：
Vue中如何在切換組件過程中，將狀態保存到內存中，防止DOM重新渲染，通俗的講就是實現如何在一個頁面輸入部分數據後到了另一個頁面再返回該頁面，數據還在。
需求分析：Page1中錄入信息，頁面跳轉帶Page2，然後再返回Page1，之前Page1錄入的信息還存在。
現在更改需求為：
首頁是A頁面
A頁面跳轉到B，B頁面不需要緩存
B頁面跳轉到C，C頁面不需要被緩存
C頁面返回到B，B頁面需要緩存
B頁面返回到A，
A再次跳轉到B
（1）此時思路是在每個路由的beforeRouteLeave(to, from, next)鉤子中設置to.meta.keepAlive
beforeRouteLeave講解
PageA頁面：
PageB頁面：
（2）用eventBus解決此問題
需要注意的一點是發布訂閱第一次會無效，因為訂閱的組件還沒創建。解決方法就是首次進入pageB頁面時接收pageA頁面params里傳遞的參數。
『貳』 vue中動態路由組件緩存及生命周期函數
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。prop :
有兩個生命周期函數：
activated ：激活
deactivated ：失活
利用keep-alive實現滾動條保存：
思路 ： 在路由頁面離開 beforeRouterEnter 中保存當前滾動條距離頂部的位置，再用 activated 鉤子函數 當他再次被激活時，讓他的滾動條等於離開時保存的那個值。
beforeCreate ：組件實例剛被創建，組件屬性計算之前，如data屬性等
created ：組件實例創建完成，屬性已綁定，但DOM還未生成，$el屬性還不存在
beforeMount ：模板編譯 / 掛載之前
mounted ：模板編譯 / 掛載之後
beforeUpdate ：組件更新之前
updated ：組件更新之後
activated ：組件被激活時調用
deactivated ：組件被移除時調用
beforeDestory ：組件銷毀前調用
destoryed ：組件銷毀後調用
(1) 創建階段
創建的標志點是New vue()，beforeCreate和created都發生在創建動作之後，但區別在於beforeCreate觸發的時候數據還沒初始化和綁定，而created的時候就生成好了。
(2) 掛載階段
beforeMount和mounted兩者主要區別在於模板是否編譯和掛載了。
(3) 更新階段
beforeUpdate 和 updated 就是當數據發生變化的時候出發的。
(4) 銷毀階段
beforeDestory 和 destoryed 的區別就是el的值data的數據依然在的。這是因為$destroy只是銷毀一個實例，清理它與其它實例的連接，解綁它的全部指令及事件監聽器，並不會清除data的數據或者清除dom。
『叄』 vue 路由緩存
在寫一個移動端項目時遇到了一個問題，每一個tab欄所對應的頁面被封裝成一個組件進行
復用，結果會導致他們共用一個滾動條。解決辦法是給這個子組件加固定的高度（例如
height:100vh），同時加一個屬性overflow-y:auto，這樣就可以解決這個問題。之後發現每當進
入主頁中任意一篇文章再退出時，頁面重新載入渲染了，之前的文章消失了，所有在這里想到
了路由緩存。
先說一下keep-alive的屬性和用法。
Props ：
用法 ：
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。
當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
（只有被<keep-alive>包裹的組件才具有這兩個鉤子函數）
其實不太建議使用include的，因為如果多個組件中都包括include中匹配到的組件，想單獨
的讓其中某個組件緩存是不太方便的。所以可以在分發路由時，在需要緩存的路由中把額外標
記的屬性寫在meta中，如圖1。
使用的時候可以在根組件中通過$route.meta.keepAlive取到該值，然後進行v-if判斷即可，如圖
2，這樣使用起來相對靈活一點。
使用keep-alive緩存路由後，已經解決了主要問題，但是有新的問題出現。緩存過的組件重
新被激活時不會記錄滾動條的狀態，默認置頂，所以應該監聽這個被復用的組件的onscroll事
件，動態記錄滾動條的位置狀態，然後重新賦值給scrollTop（如果還想優化最好給滾動事件來
一個防抖處理）。那麼問題來了，應該在何時重新賦值呢？上面用法中提到了當組件在<keep-
alive> 內被切換時會觸發activated這個鉤子函數，所以應在這里賦值。
『肆』 vue的dom更新緩沖確保無論你進行了多少次聲明更改每個組件都只需要更新1次嗎
Vue 的 DOM 更新緩沖機制確保了當你進行多次聲明更改時，每個組件最多隻會更新一次局棚。它通過使亮讓用非同步隊列來緩沖更新操作，等到所有的更改都被記錄下來之後再一次性更新 DOM。這桐鍵則樣做的好處是可以減少不必要的 DOM 操作，提高性能。
Vue 是通過一種叫做臟檢查（dirty checking）的機制來實現這一點的。它會在每次更新時掃描所有的組件並檢查它們的狀態是否發生了變化，如果發現了變化就會更新對應的 DOM。這個過程被稱為臟檢查。
但是，如果每次更新都要掃描整個應用的所有組件，時間復雜度將會是 O(n) 級別的，這顯然是不可取的。因此 Vue 會對組件進行分組，只對變化了的組件進行臟檢查。
總結來說， Vue 的 DOM 更新緩沖機制確保了不管你進行了多少次聲明更改，每個組件都最多隻會更新一次。這樣做的好處是可以減少不必要的 DOM 操作，提高性能。