Vue中keep-alive组件如何实现组件缓存与复用？

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

Keep-alive组件的作用，作用：用于保持组件状态或避免重复渲染（缓存作用）。例如：当一个用户经常从目录页面进入详情页面，再返回目录页面时，打开目录页面=进入详情页面=返回目录页面。

keep-alive组件的作用，供大家参考

作用：用于保留组件状态或避免重新渲染（缓存的作用）

比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回目录时，都能从缓存中快速渲染，而不用重新渲染。

属性

该标签有两个属性include与exclude：

• include：字符串或者正则表达式。只有匹配的组件会被缓存
• exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。