动态component组件与keep-alive组件状态的缓存

动态组件

动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：

在component的is中这个currentTab的值所需内容：
可以是通过component函数注册的组件；
在一个组件对象的components对象中注册的组件；

动态组件的传值：
其传值内容与普通组件的传值方式不经相同，只是我们需要将属性和监听事件放到component上来使用。

keep-alive

keep-alive主要用于规避一个问题：在切换组件后，用户对组件实例的操作会被销毁掉，再次回来时会重新创建组件，而组件原本的状态会丢失。

keep-alive有一些属性：

• include - string | RegExp | Array。只有名称匹配的组件会被缓存(注意：在使用时不能有空格存在)；
• exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
• max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

include 和 exclude prop 允许组件有条件地缓存：

• 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；
• 匹配首先检查组件自身的 name 选项；
  
  对于缓存的组件再次进入时，不会执行created或者mounted等生命周期函数；因此需要用到activated 和 deactivated 这两个生命周期钩子函数来监听:

activated(){};
deactivated(){};

实际代码如下：

//App.js
<keep-alive include="home,about"> //在"home,about"种不能有空格
  <component
    :is="currentTab"//通过特殊的 is 来实现;值为是component函数注册（全局注册）,在一个组件对象的components对象中注册的组件
    name="coderwhy" //通过prop给组件传值   属性和监听事件
    :age="18" //通过prop给组件传值
    @pageClick="pageClick">  //子组件给父组件传值    属性和监听事件
  </component>
</keep-alive>

//Home.js
export default {
  name: "home",
  props: {
    name: {
      type: String,
      default: ""
    },
    age: {
      type: Number,
      default: 0
    }
  },
  emits: ["pageClick"],//Vue3中子组件给父组件传值
  methods: {
    divClick() {
      this.$emit("pageClick");
    }
  }
}