vue.js+vue-router+webpack keep-alive用法

本文是機遇

提綱：

 

• 現有需求
• 各個解決方案的優缺點

• 相關的問題延伸
• keep-alive使用詳解

 

現有需求

 

每一個項目中都存在許多列表數據展現頁面，並且一般包含一些篩選條件以及分頁。

 

 

而且，點擊表格中的某一列須要進行路由跳轉進入到詳情／添加／編輯頁面。

 

比較好的用戶體驗就是，從詳情／添加／編輯頁面返回以後但願列表頁保留上次離開時的篩選條件和頁碼。可是正常狀況下路由跳轉以後實例已經被銷燬。

 

可選的解決方案

1.保留狀態數據：

     利用state存儲狀態，如篩選的品牌，時間範圍，分頁。在路由跳轉到詳情／添加／編輯的時候存儲到state（vuex）中，若是跳轉到其它路由就重置。

     缺點：每一個列表的篩選條件有差異，還要在每一個列表實例建立時讀取狀態（麻煩），可是也可使用computed屬性返回狀態。

 

2.保留頁面，保留實例：

      keep-alive,在路由跳轉時並無銷燬實例。

keep-alive

使用原理：

　　1.包裹動態組件時會緩存組件實例，而不是銷燬　　

　　2.keep-alive內路由切換時會調用activated和deactivated這兩個鉤子

　　

使用方法：

• 　　套在router-view外面，受到影響的範圍就是router-view 裏面的路由跳轉。

　　

• vue 2.1.0版本新增include和exclude屬性以選擇性的緩存哪些組件（感受使用範圍比較窄，有須要的本身看）

使用條件：

• vue.js 1.0

 

• vue.js 2.0 

 

• 非函數式組件

          什麼是函數式組件？

                 render函數中建立模版內容（通常咱們用不上，因此這個條件基本上沒影響）

 

使用須要注意問題：

 

1.要用在transition裏面（具體緣由不清楚）

 

2.一旦根路由組件外面用到keep-alive,裏面的全部路由跳轉都會受到影響

•  針對須要保留狀態的列表頁，在activated鉤子裏面執行想要更新的操做，好比更新列表數據：

     

 

     場景需求：

          mounted或者created鉤子裏面獲取列表數據

          路由離開以後跳轉回來，mounted或者created鉤子不會被調用，可是我須要更新數據。

     解決方法：

          1.定義firstIn屬性，初始化爲true,表示是否第一次進入該路由。且在第一次執行activated鉤子的時候將該值置爲false。

          2.把mounted或者created鉤子中的數據初始化操做轉移到activated鉤子中。

          

•      針對不須要保留狀態的其它頁面，直接添加deactivated鉤子並銷燬實例就能夠了。

     

 

3.發生菜單級別的跳轉是否須要從新渲染

       

    注意每個條件分支必定要執行next，不然實例被銷燬了頁面就不會被從新渲染。

 

其它問題：

 

1.非keep-alive包圍的路由組件的activated和deactivated鉤子是不會被觸發的。舉個例子：

　

假設路由跟節點有keep-alive包裹：

• AC兩個組件均可以被觸發activated和deactivated鉤子
• BD不會被觸發activated和deactivated鉤子，由於BD組件不是路由組件
• F也不會被觸發，即便F是路由組件，可是，若是keep-alive有包裹E組件中的router-view，則F也能夠被觸發

總結一下

優勢：

1.簡單粗暴

2.相比於計算屬性更脫離實際場景一些

缺點：

1.對於不須要緩存的路由都須要調用destroy 方法銷燬。