为什么vm.$destroy()的方法不起作用

Question

在路由离开前的钩子函数
beforeRouteLeave(to, from, next) {

    const vm = this;
    vm.$destroy();
    next();
},
获取this，调用destroy方法，那么因该是销毁掉当前实例了，下一次进入应该是重新走一遍生命流程，但是打断点发现下一次直接进了activated，请问我该怎么完全销毁这个实例呢？

Answer 1

你不应该destroy当前的组件，而是destroy包裹在外的keep-alive。参考vue源码中的keep-alive.js如下：

destroyed () {
    for (const key in this.cache) {
        //清除缓存的组件
      pruneCacheEntry(this.cache, key, this.keys)
    }
  }

所以，只要把keep-alive给destroy掉，你被缓存的组件自然会销毁。