最近,在开发过程中遇到一个问题,使用手机再带的返回键返回上一层菜单时,发现一跳转到首页就提示是否退出应用;这让我觉得很困惑,因为使用的开发模板跟之前的一样,为啥之前就没有出现呢?这激起了我的好奇心,我必须要找出问题所在即可!经过各种调试,最终返现了问题所在!
如上图所示,我们在页面入口处,路由展示的地方使用了vue中的内置组件--keep-alive包裹,keep-alive具有缓存的作用,在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性
也因此导致了我在动态组件中使用的时候,destroyed方法没有生效;
------------------------------------------------------------------------------------------------
对于keep-alive官方文档中的解释是:
定义:
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
props:
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。
注意,<keep-alive>
是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for
则不会工作。如果有上述的多个条件性的子元素,<keep-alive>
要求同时只有一个子元素被渲染。
看到这里,之前的疑惑就全部可解了;
附上官方链接地址文档:https://cn.vuejs.org/v2/api/#keep-alive