在 Vue.js 中，我们经常需要在不同的页面或组件之间切换。有时候，我们希望在切换回之前访问过的页面或组件时能够保留之前的状态，而不是每次都重新加载。这时候，就可以使用 Vue.js 提供的 keep-alive 组件来实现缓存组件的效果。
什么是 keep-alive 组件
keep-alive 是 Vue.js 内置的一个抽象组件，可以将其包裹在需要缓存的组件外部。使用 keep-alive 组件可以让被包裹的组件在切换时不被销毁，而是被缓存起来，以便下次访问时可以直接复用。
如何使用 keep-alive 组件
使用 keep-alive 组件非常简单，只需要在需要缓存的组件外部添加一个 标签即可。例如，我们有一个名为 MyComponent 的组件，我们想要缓存它，只需要将其包裹在 标签内即可：
<keep-alive> <MyComponent /> </keep-alive>
这样，每次切换到 MyComponent 组件时，都会检查是否已经缓存过该组件，如果已经缓存，则直接从缓存中取出并显示；如果没有缓存，则创建新的组件并缓存起来。
keep-alive 组件的生命周期
使用 keep-alive 组件时，被缓存的组件的生命周期会有所变化。具体来说，被缓存的组件在第一次加载时，会依次触发 mounted、activated 和 deactivated 生命周期钩子函数。之后，每次从缓存中取出并显示时，会依次触发 activated 和 deactivated 生命周期钩子函数。
这意味着，被缓存的组件不会被销毁，而是会保留其状态和数据。因此，我们需要注意在 deactivated 生命周期钩子函数中清理组件的状态和数据，以便下次访问时能够正确地显示。
示例代码
以下是一个使用 keep-alive 组件实现缓存组件的示例代码：
// javascriptcn.com 代码示例
<template>
<div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
mounted () {
console.log('App mounted')
},
activated () {
console.log('App activated')
},
deactivated () {
console.log('App deactivated')
}
}
</script>在这个示例中，我们将 标签包裹在了 标签外部，以便缓存路由组件。同时，我们在 App 组件的 mounted、activated 和 deactivated 生命周期钩子函数中添加了一些调试信息，以便观察生命周期的变化。
总结
在 Vue.js 中，使用 keep-alive 组件可以实现缓存组件的效果，以便在切换回之前访问过的页面或组件时能够保留之前的状态，而不是每次都重新加载。使用 keep-alive 组件非常简单，只需要在需要缓存的组件外部添加一个 标签即可。同时，我们需要注意在 deactivated 生命周期钩子函数中清理组件的状态和数据，以便下次访问时能够正确地显示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656fd30ed2f5e1655d839264