vue中keepAlive緩存及緩存下的鈎子函數

在開發中，經常有從列表跳轉到詳情頁，再返回的時候之前的狀態就沒有了，所以需要緩存列表頁的狀態，這時候就需要保存狀態，vue中提供了keep-alive組件來緩存狀態

利用meta標簽

1. 首先在路由中的meta標簽中記錄meta的屬性為true

{
    path: "/userInfo",
    component: () => import("@/views/UserInfo/Index"),
    meta: {
      title: "首頁",
      keepAlive: true // 緩存該頁面
    }
  },

2.在創建router實例的時候加上scrollBehavior方法

const router = new VueRouter({
  routes,
  // 點擊瀏覽器的前進后退或切換導航觸發
  scrollBehavior: function (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
});

3.在需要緩存的router-view組件上包裹keep-alive組件

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" v-wechat-title="$route.meta.title" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" v-wechat-title="$route.meta.title" />

 

緩存下的鈎子函數

當我們使用keepAlive緩存時，頁面中的created，mounted將不起作用，要想在進入頁面獲取新的數據列表時。需要引用activated和deactivated

activated：keepAlive組件被激活時使用（一般在keep-alive組件下，返回頁面需重新渲染列表，就在此鈎子下調用）

deactivated：keepAlive組件被停用時調用