Vue内置组件：keepalive组件的介绍与使用(附代码)

keep-alive 简介

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

参数解释
include – 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude – 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用v-bind !

使用示例

使用场景

1、尽管可以通过正则表达式来include和exclude一些组件，但用的更多是通过router.meta属性明确的指定该组件是否要缓存

router.meta配置

... { path: 'edit', component: () => import('@/views/site/edit'), name: 'site.edit', meta: { title: '网址编辑', hidden: true, cache: false } }, { path: 'list', component: () => import('@/views/site/list'), name: 'site.list', meta: { title: '网址列表', hidden: false, cache: true } },...

然后通过v-if标签来判断是否需要缓存

2、不同的页面切换，刷新规则不同：B->A不刷新， C-A刷新

路由A的配置

{ path: '/', name: 'A', component: A, meta: { cache: true // 需要被缓存 }}

组件B配置

export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.cache = true; // 让 A 缓存，即不刷新 next(); }};

组件C配置

export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.cache = false; // 让 A 不缓存，即刷新 next(); }};

注意事项

如果组件被缓存，created()方法是不会被执行的。而一般我们都会在created方法中去请求数据，加载列表，那么如果当前页面缓存了，后台数据有更新，就会造成数据不能及时显示到前台，这时就需要手动刷新页面了。
所以组件是否需要缓存需要事情而定

export default { data() { return {}; }, created() { // do some thing... }, methods: {},};

vue 自定义 select内置组件

vue内置指令使用总结

Vue组件选项props