vue项目中beforeDestroy和destroyed 钩子不起作用或者说不生效的原因和解决办法

项目中，在destroyed 写了东西，不生效，后来发现beforeDestroy也没走，就很好奇，为什么？进来的程序猿/程序媛是不是和我一样呢？

  destroyed () {
    
    
    let lastTime = new Date()
    console.log(lastTime, '---------stay-----')
  }

**

方法一：keep-alive改为false，即不使用

**
这时候排查原因，不断的找，最后发现，很简单，keep-alive的原因，keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，所以修改一下，就好了

<template>
  <div id="app">   
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

    {
    
    
      path: '/priceTrigger/param',
      name: 'paramStatement',
      component: resolve => require(['@/views/paramStatement'], resolve),
      meta: {
    
    
        title: '网格交易',
        keepAlive: false
      }
    },

就这样就成功啦~
如果你必须要用keep-alive，那么可以继续往下看了

方法二：使用keep-alive会执行的钩子函数

是不是想说，哇，难道没有解决办法了，那不是的，是不是忘记了keep-alive执行的钩子了， activated，deactivated，进入缓存的页面，还有这两个钩子函数要执行，所以，当你离开页面的时候执行的事件，可以放deactivated中，这样就轻松解决了

  activated () {
    
    
    console.log('---activated:')
   }

 deactivated () {
    
    
    let lastTime = new Date()
    console.log(lastTime, '---------stay-----')
  }

使用keep-alive后activated和deactivated这两个钩子，是vue中比较重要的两个钩子函数，切记切记！！！
这个人的keep-alive讲的特别好，推荐有时间的去看看