I am wondering if refreshing a page that runs a Vue app will trigger the Vue's .destroyed callback.
From what I observed in a Vue app that contains these simple lifecycle callbacks:
created() {
console.log(' created');
},
destroyed() {
console.log('destroyed')；
}
only 'created' is logged (not 'destroyed'). How can I check if the .destroyed callback has been executed?
I am wondering if refreshing a page that runs a Vue app will trigger the Vue's .destroyed callback.
From what I observed in a Vue app that contains these simple lifecycle callbacks:
created() {
console.log(' created');
},
destroyed() {
console.log('destroyed')；
}
only 'created' is logged (not 'destroyed'). How can I check if the .destroyed callback has been executed?
-
4
FYI for others finding this in the search engines.
destroyed()has now (Vue 3) been renamed tounmounted()– redfox05 Commented Mar 12, 2021 at 17:23
2 Answers
Reset to default 8I found the similar question and answer to it on stackoverflow
Do something before reload or close in vue.js
He/she basically explains that nothing is destroyed on page reload, you need to define
window.onbeforeunload = function(){
return "Are you sure you want to close the window?";
}
If you want to do something before a page refresh
As your question was
Is Vue's 'destroyed' method called on page refresh?
No, destroyed method called if your ponent's controller lost or you manually destroy, above example is for manually destroy.
I have found very good example in vuejs forum which uses externally this.$destroy() method.
new Vue({
el: '#app',
data() {
return {
value: 'will work until destroy'
};
},
methods: {
destroy() {
this.$destroy();
}
},
beforeDestroy() {
console.log('Main Vue destroyed')
}
})
var tmp = Vue.extend({
template: `
<div>
<span>{{ value }}</span>
<input v-model="value" />
</div>
`,
data() {
return {
value: 'always bind and work'
};
},
beforeDestroy() {
console.log('Mounted destroyed')
}
});
new tmp().$mount('#mount-point');<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
{{ value }}
<input v-model="value" />
<div id="mount-point"></div>
<button @click="destroy()">Destroy</button>
</div>Reference
Another example. If ponent's control lost or removed then destroy method will be called of that ponent's
Vue.ponent('p1', {
template: '<div>A custom ponent1!</div>',
destroyed(){
console.log('p1 destroyed');
}
})
Vue.ponent('p2', {
template: '<div>A custom ponent2!</div>',
destroyed(){
console.log('p2 destroyed');
}
})
new Vue({
el: '#app',
data() {
return {
value: 1
};
},
methods: {
},
beforeDestroy() {
console.log('Main Vue destroyed')
}
})<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<select v-model="value">
<option value="1">p1</option>
<option value="2">p2</option>
</select>
<p1 v-if="value==1"></p1>
<p2 v-if="value==2"></p2>
<button @click="destroy()">Destroy</button>
</div>