刷新一个vue页面，会不会走destroyed() 生命周期方法

一个vue中有如下代码：

created (){
  console.log(' created');
},

destroyed() {
  console.log('destroyed')；
}

这里有一个console log, 当我刷新我的页面的时候，只打印的有created，没有打印destroyed。

为什么？

这是官方文档：

destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

这个生命周期所能做的事情,始终是跟vue 实例紧密结合.
它是在什么时候触发的呢？文档也有提及,在调用 vm.$destroy()才会主动触发

所以destroyed是在被vue 被销毁的时候才会触发,但是页面刷新并没有触发vue 的销毁,它仅仅是浏览器的主动行为.

如果想监听页面的刷新的或者浏览器的刷新操作，可以在mounted 里面用这个方法：

window.addEventListener("beforeunload", function(e) {
      console.log("I want to cancel");
 // Cancel the event
    e.preventDefault();
      // Chrome requires returnValue to be set
      e.returnValue = "hello";
});

这个浏览器的window api 可以监听你所谓的「页面刷新」的情况
大概效果是这样子的: