文章目录
- 一、动态组件
- 1Vue的动态组件用法
- 二、keep-alive
- 2.1基础用法概念
- 2.2包含include和排除exclude属性
- 2.3 最大缓存实例数
- 2.4 缓存实例的生命周期
一、动态组件
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属性
- 默认缓存内部所有组件，可通过include/exclude按需控制，按组件名匹配生效
- include：白名单，仅写在此处的组件会被缓存
- exclude：黑名单，写在此处的组件不缓存，其余正常缓存
- 用法场景：组件少、需缓存的少→用include；组件多、仅少数不缓存→用exclude（更高效）
- 二者不同时用，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属性核心要点
- max 用来限制缓存的组件实例最大数量，需通过 v-bind 绑定数字
- 超出max值时，按LRU规则销毁缓存：删掉最久未被访问的组件实例，为新组件腾空间
- 避免缓存过多组件占用内存，适合动态切换组件数量多的场景
<KeepAlive:max="10"><component:is="activeComponent"/></KeepAlive>2.4 缓存实例的生命周期
当一个组件实例从 DOM 上移除，但因为被 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。
当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。
一个持续存在的组件可以通过activated() 和deactivated()注册相应的两个状态的生命周期钩子
当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期 当组件再次被激活的时候，只会触发
activated 生命周期，不再触发 created。因为组件没有被重新创建
