html5页面的生命周期,刷新一个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 可以监听你所谓的「页面刷新」的情况

大概效果是这样子的:

回答：

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

回答：

当你离开页面的时候触发

回答：

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