Vue Keep-alive组件如何用于缓存长尾关键词页面？

本文共计1012个文字，预计阅读时间需要5分钟。

目录 + Props： + 用法： + 一、基本用法 + 二、结合Router使用 + 总结 + Props： + include + 排除字符串或正则表达式。只有匹配名称的组件会被缓存。 + exclude + 排除字符串或正则表达式。所有匹配名称的组件都不会被缓存。

目录

• Props：
• 用法：
• 一、基本用法
• 二、结合Router使用
• 总结

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

用法：

keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。

activated：在 keep-alive 组件激活时调用，该钩子函数在服务器端渲染期间不被调用。