15《Vue 入门教程》Vue 动态组件 & keep-alive

如题所述

第1个回答  2022-07-06

本小节我们将介绍 Vue 的动态组件,以及缓存 keep-alive 的使用。包括动态组件的使用方法,以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是让多个组件使用同一个挂载点,并动态切换。动态组件是 Vue 的一个高级用法,但其实它的使用非常简单。keep-alive 是 vue 的内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染 DOM。

通过使用保留的 元素,动态地把组件名称绑定到它的 is 特性,可以实现动态组件:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2 行,我们使用动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行,我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是:当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建,并且当组件切换时不会被销毁。

keep-alive 的用法相对简单,直接使用 keep-alive 包裹需要缓存的组件即可:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行,我们定义了组件 ComponentA、ComponentB、ComponentC,分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过, keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,我们通过修改 currentView 切换组件时,组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染,会触发 created 事件,当再次切换显示该组件时,created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样,也是组件的生命周期函数。不过, activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated :进入组件时触发。 deactivated :退出组件时触发。

示例代码:

实例演示

"运行案例" 可查看在线运行效果

代码解释: JS 代码中,我们定义了组件 ComponentA、ComponentB,并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行,我们定义了两个按钮,通过点击按钮切换 currentView 的值。当我们切换组件显示时,可以看到这样的打印信息:

include 和 exclude 是 keep-alive 的两个属性,允许组件有条件地缓存。 include: 可以是字符串或正则表达式,用来表示只有名称匹配的组件会被缓存。 exclude: 可以是字符串或正则表达式,用来表示名称匹配的组件不会被缓存。

示例:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA,ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,在案例中,组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发,而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA,ComponentB。

本节,我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点: