核心内容摘要
91吃瓜黑料：深度揭秘，那些你不知道的真相与趣闻
文章目录
动态组件1Vue的动态组件用法
keep-alive
1基础用法概念
2包含include和排除exclude属性
3 最大缓存实例数
4 缓存实例的生命周期
动态组件1Vue的动态组件用法templatedivclassapp-containerh1App 根组件/h1hr/button clickcomName Left 展示Left组件/buttonbutton clickcomName Right 展示Right组件/buttondivclassbox!--渲染 Left 组件和 Right 组件--keep-alivecomponent:iscomName/component/keep-alive/div/div/templatescriptimportLeftfrom/components/Left.vueimportRightfrom/components/Right.vueexportdefault{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
1基础用法概念当使用 component :is... 来在多个组件间作切换时被切换掉的组件会被卸载。
是一个内置组件它的功能是在多个组件间动态切换时缓存被移除的组件实例。
同样也是一个抽象组件它自身不会渲染一个 DOM 元素也不会出现在组件的父组件链中。
我们可以通过 组件强制被切换掉的组件仍然保持“存活”的状态!--失活的组件将会被缓存--keep-alivecomponent v-bind:iscurrentTabComponent/component/keep-alive
2包含include和排除exclude属性默认缓存内部所有组件可通过include/exclude按需控制按组件名匹配生效include白名单仅写在此处的组件会被缓存exclude黑名单写在此处的组件不缓存其余正常缓存用法场景组件少、需缓存的少→用include组件多、仅少数不缓存→用exclude更高效二者不同时用exclude优先级高于include!--逗号分隔字符串--keep-alive includea,bcomponent:isview/component/keep-alive!--正则表达式(使用v-bind)--keep-alive:include/a|b/component:isview/component/keep-alive!--数组(使用v-bind)--keep-alive:include[a, b]component:isview/component/keep-alive
3 最大缓存实例数eep-alive的max属性核心要点max 用来限制缓存的组件实例最大数量需通过 v-bind 绑定数字超出max值时按LRU规则销毁缓存删掉最久未被访问的组件实例为新组件腾空间避免缓存过多组件占用内存适合动态切换组件数量多的场景KeepAlive:max10component:isactiveComponent//KeepAlive
4 缓存实例的生命周期当一个组件实例从 DOM 上移除但因为被 缓存而仍作为组件树的一部分时它将变为不活跃状态而不是被卸载。
当一个组件实例作为缓存树的一部分插入到 DOM 中时它将重新被激活。
一个持续存在的组件可以通过activated() 和deactivated()注册相应的两个状态的生命周期钩子当组件第一次被创建的时候既会执行 created 生命周期也会执行 activated 生命周期 当组件再次被激活的时候只会触发activated 生命周期不再触发 created。
因为组件没有被重新创建