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

在我的一个vue文件中有:

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

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

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

为什么?

回答:

我稍微看了一下你的问题.
你是想要监听「页面刷新」时候会触发的动作.
然后「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…

回答:

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

回答:

当你离开页面的时候触发

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注