Vue组件——动态、缓存、异步组件

1. 动态组件 component

语法：静态：

           动态：

可以用来实现页面的切换：

// 模板
    
    btn_box1
    btn_box2
    btn_box3

// 方法

问题：当我们在其中一个组件中写了一个输入框，在输入过一次后，切换到其他页面然后再切换回来时，之前输入的值就没有了。因为切换走当前组件时，该组件就销毁了，再切换回来时，又会重新挂载一次，所以前面的操作就都没有了。

想要实现即时我切换走当前组件，下次切换回来时之前的操作还在，就可以使用缓存组件，将该组件缓存起来。

2. 缓存组件——keep-alive

2.1 语法——与动态组件搭配使用

1. 属性include：包括谁就只缓存谁 

           exclude：除了xx，其余都缓存

写法：1. include="Box1"  用得多

           2. :include="/Box1|Box3/"  加了:时等号后面的为js语言环境，可以写正则表达式

           3. :include="变量名"

简单使用案例：缓存Box1，Box3组件，也就是切换走时不销毁这两个组件；切换走Box2时，Box2就销毁了，下次切换到Box2时，该组件就mounted一次。

         此时也出现了一个问题，当我在1组件勾选了一些选项时，切换到2组件又勾选了其他的选项，再切换回1组件，它缓存了之前的数据，就不会新增后面的筛选条件。比如说：在逛淘宝的时候，我先搜索了短袖，在筛选组件中勾选了几个筛选条件，那它展示的商品就会限定在一定范围内一般会在生命周期函数的mounted函数中实现首屏数据，当

2.2 缓存组件的两个钩子函数——activated/deactivated

        1. 活跃状态——activated

        渲染函数，切换一次页面，就调用一次渲染函数，回到这个组件时做操作（比如再做网络请求）activated() { console.log("box1渲染了一次"); }

        2. 失效状态——deactivated

        用于切换前缓存用户的数据。之前介绍生命周期函数时，缓存用户关闭页面前的相关数据（比如：音乐、视频播放事件），可以在销毁钩子（unmounted）中实现，但前面缓存在组件，缓存的组件不会销毁，也就是没有销毁钩子。但又想实现上面写的问题，所以Vue框架提供了deactivated函数来缓存用户的最后操作。离开这个组件时做操作deactivated() { }

简单案例：基于上面的动态组件

// Box1组件
// 1. template标签内
// 双向数据绑定v-model




// 2. script标签内

3. 异步组件

类似于懒加载，先不将组件全部打包，当切换到该组件时才打包这个组件，可以提高效率，节省内存。

语法：

Vue2.x：Box1:()=> import("./components/Box1.vue"),

Vue3.x：先引入 import {defineAsyncComponent} from "vue"

               用法：Box1: defineAsyncComponent(()=> import("./components/Box1.vue")),