vue的keep-alive中,使用include和exclude不生效的问题

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

include和exclude

include 和 exclude 属性允许组件有条件地缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

问题

    <keep-alive include="com">
     <router-view></router-view>
    </keep-alive>

使用include属性缓存com组件时,发现没有效果?对于想缓存的页面并没有进行缓存

原因

发现没有对组件设置name属性,是在组件中,而不是路由中
在这里插入图片描述

注意点

1.使用include的时候,必须给所有路由管理起来的vue组件都设置name属性,不然,没有name属性的也会被缓存下来,这样就不好实现有条件的筛选
2.使用exclude的时候,也必须给所有路由管理起来的vue组件都设置name属性,不然,没有name属性的组件也会被排除在外
3.当同时使用include和exclude的时候,exclude的优先级会更高,include就不生效
在这里插入图片描述
4.缓存了组件之后,再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted,如果你想每次进入组件都做一些事情的话,你可以放在activated进入缓存组件的钩子中。
同理:离开缓存组件的时候,beforeDestroy和destroyed并不会触发,可以使用deactivated离开缓存组件的钩子来代替。

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值