vue基础-keep-alive

keep-alive的使用与理解

基本工作原理

不太懂

用法 （官方）

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

用法 （个人）

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated 和 deactivated 这两个生命周期钩子函数是 标签配套的钩子函数

使用

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>   这里的:is="view"  =>  v-bind:is="view" ==>  <view></view>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>       注意： keep-alive 标签只 里面支持一个 标签
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

官方介绍注意

注意，<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

特殊属性 （官方介绍）

include and exclude 还有 max

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

max 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

// `include` 和 `exclude` 用法差不多 作用相反

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

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

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

// max的使用
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

（开始实战）好了我们对<keep-alive></keep-alive> 的使用与 使用场景有了解了

给你的组件套一个 这样 就能实现功能了 （不管三七二十一直接缓存！！）

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

（条件缓存） 可随之而来的又有一个问题 我并不需要所有页面都缓存啊？！

<keep-alive :include="keepAlive">
    <router-view></router-view>
</keep-alive>

我们利用include这个属性， 来达到我们的目的----条件缓存

由上官方介绍， 我们能知道 include 属性的值 支持许多类型 这里为了省事 我才用数组 keepAlive

到这里， 大家又开始疑问了， 数组 keepAlive 里面该填什么？？ 他又要和谁匹对？？

<keep-alive :include="keepAlive">
    <router-view></router-view>
</keep-alive>

...
data() {
	return {
		keepAlive: ['dwp1', 'dwp2']
	}
}

好， 当咱们来到这里， 可能就会出现一个问题， 为什么好像没有效果啊！！

为什么dwp1 and dwp2 这两个页面 咱们没有起到作用了

前面不管三七二十一直接缓存！！ 还有效果。现在连效果都没有了！！！ 这博客浪费老子时间…

注意事项：

上文中的 include 属性的值 它匹对的是什么值呢？？！

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

// dwp1.vue
export default {
  name: 'dwp1',
  components: {
    NoMessage,
    listAwaBox
  }
}

// dwp2.vue
export default {
  name: 'dwp1',
  components: {
    NoMessage,
    listAwaBox
  }
}

结尾

以上就是keep-alive的使用， 大家不喜勿喷。

还不太了解的， 姐姐妹妹们。可以加我qq：1172824156 可以私聊 （什么？怎么没有哥哥弟弟？！！ 这个嘛， 男人得学会自己坚强的活下去）