Vue动态组件以及keep-alive的使用

一、动态组件

1Vue的动态组件用法

<template><divclass="app-container"><h1>App 根组件</h1><hr/><button @click="comName = 'Left' ">展示Left组件</button><button @click="comName = 'Right' ">展示Right组件</button>​<divclass="box"><!--渲染 Left 组件和 Right 组件--><keep-alive><component:is="comName"></component></keep-alive></div></div></template>​<script>importLeftfrom'@/components/Left.vue'importRightfrom'@/components/Right.vue'exportdefault{data(){return{comName:'Left'}},components:{Right,Left},}</script>

核心就是用Vue官方内置的标签做组件占位符，它得配合:is动态绑定属性来用，:is的值必须是当前组件里注册过的子组件名，这样才能渲染对应的组件。而components是组件里的配置项，作用就是注册子组件，不管是用动态渲染，还是直接写组件标签用，都得先在这个配置项里注册导入的子组件，这是Vue的硬性规则，不注册的话Vue就不认识组件会报错。然后实现组件切换的话，就是给按钮绑@click点击事件，事件里直接写赋值语句修改:is绑定的那个变量就行，不用写methods，因为只是简单改值，这种内联写法就够用，点击按钮修改变量值，变量一变，:is的绑定值跟着变，页面就自动切换渲染对应的组件了，初始给变量赋哪个组件名，页面就默认渲染哪个组件，要是点了对应已渲染组件的按钮，变量值没变化，组件就不会有任何改动。还有Vue默认切换动态组件时，被隐藏的组件会被销毁，切回去又会重新创建，组件里的状态比如输入框内容就会丢，所以要给包一层Vue官方的内置标签keep-alive，它的作用就是缓存被切换隐藏的组件，不让组件销毁，保留组件的状态，下次切回来直接用缓存的组件就行，不用重新创建，这俩内置标签搭配用就是动态组件的最佳实践，要是不在乎状态丢失，也可以不加keep-alive。

二、keep-alive

2.1基础用法概念

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。

是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
我们可以通过 组件强制被切换掉的组件仍然保持“存活”的状态

<!--失活的组件将会被缓存！--><keep-alive><component v-bind:is="currentTabComponent"></component></keep-alive>

2.2包含include和排除exclude属性

1. 默认缓存内部所有组件，可通过include/exclude按需控制，按组件名匹配生效
2. include：白名单，仅写在此处的组件会被缓存
3. exclude：黑名单，写在此处的组件不缓存，其余正常缓存
4. 用法场景：组件少、需缓存的少→用include；组件多、仅少数不缓存→用exclude（更高效）
5. 二者不同时用，exclude优先级高于include

<!--逗号分隔字符串--><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>

2.3 最大缓存实例数

eep-alive的max属性核心要点

1. max 用来限制缓存的组件实例最大数量，需通过 v-bind 绑定数字
2. 超出max值时，按LRU规则销毁缓存：删掉最久未被访问的组件实例，为新组件腾空间
3. 避免缓存过多组件占用内存，适合动态切换组件数量多的场景

<KeepAlive:max="10"><component:is="activeComponent"/></KeepAlive>

2.4 缓存实例的生命周期

当一个组件实例从 DOM 上移除，但因为被 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。

当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过activated() 和deactivated()注册相应的两个状态的生命周期钩子
当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期 当组件再次被激活的时候，只会触发
activated 生命周期，不再触发 created。因为组件没有被重新创建