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

Question

在我的一个vue文件中有：

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

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

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

为什么？

Answer 1

我稍微看了一下你的问题.
你是想要监听「页面刷新」时候会触发的动作.
然后「destroyed()」所能做的事情于页面是否能刷新其实关系不大.
这是官方文档

Vue 实例销毁后调用。调用后，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 可以监听你所谓的「页面刷新」的情况

大概效果是这样子的:

https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://developer.mozilla.org...

Answer 2

想要检查有木有销毁最简单的就是alert()，他可以阻塞浏览器的大部分行为

Answer 3

当你离开页面的时候触发

Answer 4

destroy钩子要手动调用$destrory()方法才会被触发