vue keep-alive妙用

Dear 丶 2021-09-19 00:40 220阅读 0赞

周所周知vue实现spa单页引用的核心原理是：**根据url动态的切换组件**

但是每次切换组件时，组件都会重新实例化，数据初始化。  
那么有没有一个api，  
可以让组件在切换的时候**保持原来的状态**呢？比喻表单输入值，分页信息等等

这就是**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>
    
    
    <transition>
      <keep-alive>
        <component :is="view"></component>
      </keep-alive>
    </transition>

**一目了然，就是用它套在需要保持状态的组件的外面**  
大家知道其实每个页面都是一个组件，所以keep-alive,还可以控制一个页面的状态，  
用法就是：

<keep-alive include="logs,productManage">
              <router-view />
      </keep-alive>

对直接用它包住视图组件

**keep-alive有3个属性：**  
include 包含的组件的名name值  
exclude 不包含的  
max 最大允许保持激活的组件数量

include exclude 的3种写法

<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>

这里的name值，就是组件的name值，

export default {
      name: 'logs',
      components: { page, myTag },
      data () {
        return {}
      }
     }

也可以是用vue.component(‘foo’,\{ \})这里的组件名称。

**为了更好的满足需求，vue为keep-alive提供了另外两个生命周期钩子**

activated () {
        alert('我当前要激活啦')
        this.init({ page: 1, pageSize: 10 })
      },
      deactivated () {
        alert('我当前要被移除啦')
      },

**activated** ：  
组件激活是来一波业务逻辑  
**deactivated**  
离开组件时再来一波业务，