keep-alive的使用及注意点

以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）

keep-alive属性：

include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

用法：

缓存动态组件：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们（此种方式并无太大的实用意义）。

缓存路由组件：

使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。

方式一：vue文件中

    

方式二：router.js中

{
        path: '/as',
        icon: 'earth',
        title: '赠品管理',
        name: 'as',
        component: Main,
        children: [{
            path: 'a',
            title: '赠品管理',
            name: 'a',
            component: () =>
                import ('@/views/a/index.vue'),
            meta:{
                keepAlive:true
            }
        }]
    }

缓存你想要缓存的：

使用v-if通过路由元信息判断缓存哪些路由

 
    
        
    


    

//router配置
new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: '/edit',
      name: 'edit',
      component: Edit,
      meta: {
        keepAlive: false // 不需要被缓存
      }
    }
  ]
});

生命周期钩子：

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用

deactivated：组件被停用(离开路由)时调用

注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

我不想把查询条件和查询结果被缓存，那么我可以这样写：

mounted: function() {
     this.loaddata(1)
},
activated: function () {
     this.productclass.name=""//查询条件
     this.loaddata(1) //查询结果的方法
}

新增属性：

include：匹配的 路由/组件 会被缓存
exclude：匹配的 路由/组件 不会被缓存
include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。
正则和数组形式，必须采用v-bind形式来使用。

缓存组件的使用方式：

但更多场景中，我们会使用keep-alive来缓存路由：

注：当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。