vue中destroyed不生效的原因

最近，在开发过程中遇到一个问题，使用手机再带的返回键返回上一层菜单时，发现一跳转到首页就提示是否退出应用；这让我觉得很困惑，因为使用的开发模板跟之前的一样，为啥之前就没有出现呢？这激起了我的好奇心，我必须要找出问题所在即可！经过各种调试，最终返现了问题所在！

 

 如上图所示，我们在页面入口处，路由展示的地方使用了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