测试:vue
activated() { console.log('activated') //只刷新数据,不改变总体的缓存 this.getList() }, mounted () { this.getList() }, deactivated () { //清除keep-alive的缓存 console.log('deactivated') // this.$destroy(true) // 这里咱们并无清楚keep-alive缓存 }, beforeDestroy () { console.log('beforeDestroy') // 实例销毁以前调用。在这一步,实例仍然彻底可用。 }, destroyed () { console.log('destroyed') // Vue 实例销毁后调用。调用后,Vue 实例指示的全部东西都会解绑定,全部的事件监听器会被移除,全部的子实例也会被销毁。 }, //修改列表页的meta值,false时再次进入页面会从新请求数据。 beforeRouteLeave(to, from, next) { console.log('beforeRouteLeave') from.meta.keepAlive = false next() }, beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter') next() },
场景一: 从其余路由进入该路由:缓存
场景二:当前路由刷新函数
场景三: 当前路由下跳到二级路由 (页面作了判断,当跳到它下面的二级路由时候取消keep-alive)测试
场景四:从二级路由再跳回来this
从上能够看出,几个场景下都没有执行spa
那到底啥时候执行destryed呢?code
注释已经给出了答案,是vue实例销毁的时候调用,哈哈!!这些场景都只是路由之间的跳转blog
还有其余生命周期函数后期再加上生命周期