keep-alive的使用及注意点

约定不等于承诺〃 2022-12-16 13:07 116阅读 0赞

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

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

**用法：**

**缓存动态组件：**

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

<keep-alive>
      <component :is="view"></component>
    </keep-alive>
     
    
    <keep-alive>
      <comp-a v-if="a > 1"></comp-a>
      <comp-b v-else></comp-b>
    </keep-alive>

**缓存路由组件：**

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

方式一：vue文件中
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
     
    方式二：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`通过路由元信息判断缓存哪些路由

<keep-alive>
         <router-view v-if="$route.meta.keepAlive">
             
         </router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive">
         
     </router-view>
     //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 include="a,b">
          <component :is="view"></component>
        </keep-alive>
        
        
        <keep-alive :include="/a|b/">
          <component :is="view"></component>
        </keep-alive>
        
        
        <keep-alive :include="['a', 'b']">
          <component :is="view"></component>
        </keep-alive>

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

<keep-alive include='a'>
        <router-view></router-view>
    </keep-alive>

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