Vue动态组件

作者	内容	时间
jj	Vue动态组件	2023年7月22日

动态组件

动态组件就是让多个组件使用同一个挂载点，并动态切换 is 来实现动态组件。

<component :is="Abox"></component>

keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁，主要用于保留组件状态或避免重新渲染。

内置组件

component：是vue里面的一个内置组件。

vue内置的组件还包括：

• transition：作为单个元素/组件的过渡效果
• transition-group：作为多个元素/组件的过渡效果。
• keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
• slot：作为组件模板之中的内容分发插槽

keep-alive和created

**keep-alive作用就是能够缓存不活动的组件。**就是在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。

一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。

利用keep-alive组件包裹router-view组件，将不活动的组件缓存起来：

当keep-alive页面缓存下来的时候，只会调用一次created这个钩子函数，因为已经被缓存下来了，所以再次进入的话 就不会 触发created钩子了，created这个钩子就是只有页面渲染的时候会触发，取而代之的是使用我们的activated钩子函数

注意：当keepalive页面缓存下来的时候,如果页面有activated钩子和created钩子函数，这两个函数会被同时触发

keep-alive

keep-alive是Vue内置的一个组件，可以是被包含的组件保留状态，或避免重新渲染

router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

例如,我们切换tab栏的时候,如果我们想保存组件的状态的话我们可以使用keep-alive

假如我们有两个路由链接,他们分别对应的是不同的组件，相当一个tab栏，下面这两个组件会生命周期发生什么变化？

// 某个页面
<div>
  <router-link to="/keepalive/about">aboutrouter-link>
div>
<div>
  <router-link to="/keepalive/news">newsrouter-link>
div>
<router-view>router-view>

• 当我们点击about链接，about组件会触发created钩子函数,
• 当我们切换到news链接的时候,about组件会触发destroyed 钩子函数
• 也就是说我们的组件在tab切换的时候被重新创建 和 销毁了

当我们使用vue的内置组件keep-alive 包裹我们的路由出口的时候我们会发现组件就被缓存下来不会被销毁了，在我们切换tab的时候，组件不会调用created，只有初次会被调用

<div>
	<router-link to="/keepalive/about">aboutrouter-link>
div>
<div>
	<router-link to="/keepalive/news">newsrouter-link>
div>

<keep-alive>
	<router-view>router-view>
keep-alive>

当页面被keep-alive缓存下来的时候，vuet提供两个钩子函数

• activated被 keep-alive 缓存的组件激活时调用。

• deactivated被 keep-alive 缓存的组件失活时调用。

1. 当keepalive页面缓存，有activated钩子和created钩子函数时这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次
2. 页面被缓存下来的时候，就不会触发destroyed生命钩子取而代之触发的是deactivated钩子

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用。如果作为正常组件使用，是不会被调用的。

然后引出我们keep-alive里边的两个属性

• include 字符串或正则表达,只有匹配的组件会被缓存
• exclude 字符串或正则表达式 ，任何匹配的组件都不会被缓存
• max 定义缓存组件上限

include定义缓存白名单指定哪些需要缓存，keep-alive会缓存命中的组件；

exclude定义缓存黑名单指定哪些组件不需要缓存，include和exclude只能用一个 ，被命中的组件将不会被缓存；

max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。