javascript - Is Vue's 'destroyed' method called on page refresh? - Stack Overflow

admin管理员组

文章数量:1241040

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?

• javascript
• vue.js

Share Improve this question Follow edited Jul 14, 2022 at 1:48 tony19 138k2323 gold badges277277 silver badges346346 bronze badges asked May 10, 2019 at 10:47 user7693832user7693832 6,8492525 gold badges7777 silver badges129129 bronze badges 1

• 4 FYI for others finding this in the search engines. destroyed() has now (Vue 3) been renamed to unmounted() – redfox05 Commented Mar 12, 2021 at 17:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I 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>

本文标签： javascriptIs Vue39s 39destroyed39 method called on page refreshStack Overflow