Vue中组件缓存_＜keep-alive＞标签的使用

我不是女神ヾ 2024-03-30 16:19 16阅读 0赞

#### 文章目录 ####

*  Vue中组件缓存\_<keep-alive>标签的使用
 *   *  1. <keep-alive>标签的相关说明
     *  2. <keep-alive>三种常用方式
     *   *  2-1 使用内置组件 <component>
         *  2-2 出现条件判断时的子组件
         *  2-3 结合路由组件使用
     *  3. <keep-alive>标签的属性
     *   *  3-1 include：名称匹配的组件才会被缓存
         *  3-2 exclude：名称匹配的组件不会被缓存

## Vue中组件缓存\_标签的使用 ##

### 1. 标签的相关说明 ###

实现效果：  
需要保留上一次Tab 页的功能\[即切换回来页面数据还在\]  
如下图，当选择 B 组件时，希望从首页切换到设置页时，  
还会停留在 B 组件，且B组件的input框输入数据仍在，  
而不是重新渲染为默认的 A 组件  
![在这里插入图片描述][468241b7d3004f8b8b953cce5326a222.gif_pic_center]

注意：
    	keep-alive 包裹「动态组件」时，
    	会缓存不活动的组件实例，而不是销毁它们。
    	它是一个抽象的组件，它自身不会渲染成一个 DOM 元素，
    	也不会出现在父组件链中。
    	
    	它只有在包含动态组件时，才会产生效果。
    	如果不是动态组件则会无效。
    		比如下面这种用法是没有效果的。
    <keep-alive>
      <my-component></my-component>
    </keep-alive>

### 2. 三种常用方式 ###

***1. 不加属性include或exclude控制的话，则标签内渲染的所有组件都缓存  
2. 另外需要注意，keep-alive 只能用在只有一个子组件的情况。  
如果在其中有 v-for 则不会产生效果***

#### 2-1 使用内置组件 ####

<keep-alive>
     <component :is="view"></component>
    </keep-alive>

#### 2-2 出现条件判断时的子组件 ####

<keep-alive>
     <comp-a v-if="a > 1"></comp-a>
     <comp-b v-else></comp-b>
    </keep-alive>

#### 2-3 结合路由组件使用 ####

<keep-alive>
       <router-view></router-view>
     </keep-alive>

### 3. 标签的属性 ###

#### 3-1 include：名称匹配的组件才会被缓存 ####

// 可以用
    //		逗号分隔字符串、正则表达式、一个数组
    //	来限定要缓存的组件，其中a和b为要缓存的组件name值
    <keep-alive include="a,b"></keep-alive>
    <keep-alive :include="/a|b/"></keep-alive>
    <keep-alive :include="['a', 'b']"></keep-alive>
    
    //	路由实例：仅缓存路由组件system 
    //		注意： 这个system为组件的name值
    <keep-alive include="system">
      <router-view></router-view>
    </keep-alive>

#### 3-2 exclude：名称匹配的组件不会被缓存 ####

类似include属性，效果相反

[468241b7d3004f8b8b953cce5326a222.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/019fd9dd905a424eb75351450ddeb541.gif