keep-alive和router-view的結合

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重複渲染DOM。

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

<keep-alive> 與 <transition>相似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠在 this.$parent 中找不到 keep-alive 。

 

<keep-alive :include="cachedViews">
  <router-view v-if="!$route.meta.noKeepAlive" :key="key" />
</keep-alive>
<router-view v-if="$route.meta.noKeepAlive" :key="key" />

cachedViews中保存的是所有需要緩存的組件的name(而非router的name)

keep-alive中組件的生命週期會有actived和deactivated兩個鉤子

• 使用<keep-alive>會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。
• 當引入keep-alive 的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者後退）時，只觸發activated

• 我們知道 keep-alive 之後頁面模板第一次初始化解析變成HTML片段後，再次進入就不在重新解析而是讀取內存中的數據，即，只有當數據變化時，才使用VirtualDOM進行diff更新。故，頁面進入的數據獲取應該在activated中也放一份。數據下載完畢手動操作DOM的部分也應該在activated中執行纔會生效。

  所以，應該activated中留一份數據獲取的代碼，或者不要created部分，直接將created中的代碼轉移到activated中。