关于动态组件(keep-alive)的问题

一.什么是keep-alive动态组件。

当组件需要进行频繁的切换的时候这个时候就需要用到动态组件了，动态组件的几个属性，<component :is="要动态绑定的组件"></component>,这个是Vue官方提供的api, 频发的切换组件，会消耗大量的性能，这时候就可以使用<keep-alive> </keep-alive>,来解决这个问题。

二.组件缓存

1.keep-alive定义:

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

<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。当组件

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

2.keep-alive的生命周期

1.activated

在keep-alive组件激活时调用。

2.deactivated

在keep-alive组件停用时调用。

被包含在keep-alive中创建的组件,会多出两个生命周期的钩子:activated和deactivated

使用keep-alive会将数据保留在内存中。

3.keep-alive使用方法

include-字符串或数组,正则表达式。只有名称匹配的组件会被缓存------>include的值为组件的name

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

max--数字。最多可以缓存多少组件

4.代码实例

 <template>
     <div>
        <a href="#" @click.prevent="comName = 'login'">登录</a>
        <a href="#" @click.prevent="comName = 'register'">注册</a>
        <a href="#" @click.prevent="comName = 'logOut'">退出</a>
     
     // login组件会被缓存 不设置include会默认缓存所有挂载到<component></component>的组件
     // 缓存多个指定组件include = ['login','register']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>

二.代码的实例

APP.vue(没有include做缓存的时候)

<template>
  <div class="">
    <div class="aa">
      <button @click="aa = 'shouye'">首页</button>
      <button @click="aa = 'firend'">朋友</button>
      <button @click="aa = 'user'">用户</button>
    </div>
    <keep-alive>
      <component :is="aa"></component>
    </keep-alive>
  </div>
</template>

<script>
import firend from "./components/firend.vue";
import shouye from "./components/shouye.vue";
import user from "./components/user.vue";
export default {
  data() {
    return {
      aa: "user",
    };
  },
  components: {
    shouye: shouye,
    firend,
    user,
  },
};
</script>

<style scoped>
.aa {
  display: flex;
  margin-top: 600px;
}
button {
  flex: 1;
}
</style>

firend.vue

<template>
  <div class="">
    <h1>朋友的页面</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log("friend 组件创建");
  },
  activated() {
    console.log("friend 组件 激活");
  },
  methods: {},
};
</script>

<style scoped></style>

shouye.vue

<template>
  <div class="">
    <h1>我是一个首页</h1>
  </div>
</template>

<script>
export default {
  activated() {
    console.log("首页组件生成");
  },
  deactivated() {
    console.log("首页组件被销毁");
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

user.vue

<template>
  <div class="">用户的界面</div>
</template>

<script>
export default {
  activated() {
    console.log("用户组件被生成");
  },
  deactivated() {
    console.log("用户组件被销毁");
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

   图示：

 

也可以使用include来进行缓存：

 <keep-alive include="shouye">
      <component :is="aa"></component>
 </keep-alive>

图示:

当缓存较多的组件的时候:

  <keep-alive :include="['shouye', 'firend', 'user']">
      <component :is="aa"></component>
    </keep-alive>

 

当有name属性写了准备的值的时候,以name属性为准。不会以为include里面为准。

列如：在name里面的名字是friends

<script>
export default {
  name: "friends",
  created() {
    console.log("friend 组件创建");
  },
  activated() {
    console.log("friend 组件 激活");
  },
  methods: {},
};
</script>

在App.vue里面是firend:

  <keep-alive :include="['shouye', 'firend', 'user']">
      <component :is="aa"></component>
    </keep-alive>

name的优先级要大一些，此时不会做缓存。

图示: