Vue3组件化开发：切换组件、keep-alive

比如我们现在想要实现了一个功能：

         点击一个tab-bar，切换不同的组件显示；

我们可以通过两种不同的实现思路来实现：

        方式一：通过v-if来判断，显示不同的组件；

        方式二：动态组件的方式；

1. v-if显示不同的组件

我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：

2. 动态组件的实现

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

这个currentTab的值需要是什么内容呢？

        可以是通过component函数注册的组件；

        在一个组件对象的components对象中注册的组件；

3. 动态组件的传值

如果是动态组件我们可以给它们传值和监听事件吗？

        也是一样的；

        只是我们需要将属性和监听事件放到component上来使用；

4. keep-alive属性

keep-alive有一些属性：

        include - string | RegExp | Array。只有名称匹配的组件会被缓存；

        exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；

        max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

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

        二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；

        匹配首先检查组件自身的 name 选项；

5. 缓存组件的生命周期

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的：

        但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；

        这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听；