keep-alive详解,各种场景使用

keep-alive详解

<keep-alive></keep-alive>包含的组件会被缓存下来，不进行再次渲染DOM，从而节省性能;

切换内容时会出发activated和deactivated两个生命周期钩子函数，被缓存的组件会保留当前组件的状态。

路由页面缓存

//利用router的meta字段
//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

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

组件缓存

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

结合berforeRouteEnter

		**结合路由**`beforeRouteLeave(to, from, next)`的钩子，设置`to.meta.keepAlive` 来指定目的页面是否进行keepAlive。

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // 当前页面跳转到下一个页面时，让目的页面缓存，不刷新
        next();
    }
};

**各位大佬好,以后我会坚持每天写一篇,自己学习的同时希望能带给你们帮助,如果有不对的地方希望指出,语言粗暴更佳,求关注 **