Question

我想知道刷新运行Vue应用程序的页面是否会触发Vue的.destroyed回调。

从我在包含以下简单生命周期回调的Vue应用程序中观察到的结果来看：

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

仅记录'created'（不记录'destroyed'）。如何检查.destroyed回调是否已执行？

Answer 1

我在stackoverflow上发现了类似的问题并得到答案

Do something before reload or close in vue.js

他/她基本上解释说页面重新加载没有破坏任何东西，您需要定义

window.onbeforeunload = function(){
  return "Are you sure you want to close the window?";
}

如果您想在刷新页面之前做些什么

Answer 2

您的问题是

页面刷新时是否调用了Vue的“销毁”方法？

否，destroyed方法在组件的控制器丢失或您手动销毁时调用，上面的示例用于手动销毁。

我在vuejs论坛中找到了很好的示例，该示例使用外部this.$destroy()方法。

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.com/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

另一个例子。如果组件的控件丢失或删除，则将调用该组件的destroy方法

Vue.component('comp1', {
  template: '<div>A custom component1!</div>',
  destroyed(){
    console.log('comp1 destroyed');
  }
})

Vue.component('comp2', {
  template: '<div>A custom component2!</div>',
  destroyed(){
    console.log('comp2 destroyed');
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      value: 1
    };
  },
  methods: {
  },
  beforeDestroy() {
    console.log('Main Vue destroyed')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <select v-model="value">
    <option value="1">comp1</option>
    <option value="2">comp2</option>
  </select>
  <comp1 v-if="value==1"></comp1>
   <comp2 v-if="value==2"></comp2>
  <button @click="destroy()">Destroy</button>
</div>

页面刷新时会调用Vue的“销毁”方法吗？

2 个答案: