Published: Modified: V1.1
vuejs

vue destroyed lifecycle hook

The vue destroyed life cycle hook will fired when a vue instance is destroyed. Such an event can happen by calling the destroy instance method of a vuejs instance. So far I can not say that this is something that I do in actual projects but I am sure that if I make enough vuejs examples I might end up in a situation in which I might have to do this with vue instances.

There are several other life cycle hooks that are worth mentioning also such as the create, mounted, and updated hooks. The destroyed life cycle hook is yet another one of these hooks, so it makes sense that I should write one where I am focusing on the destroyed hook on top of those to continue with writing on life cycle hooks of vuejs.

1 - Basic Vue destroyed hook example

So the basic idea of the destroyed hook is that it is the last hook of interest with the full range of lice cycle hooks there are to work with in a vuejs instance. When this hook is called that is it for the vuejs instance, so it makes sense to preform any file work that should be done before all is lost and the vm is completely destroyed.

The destroy instance method can be used as a way to trigger the begging of the end for a vuejs instance. Once the destroy method is called the before destroy hook will be called followed by the destroyed hook. So say I have a simple vuejs instance that just displays a simple interface that can be used to step a count property value in the data object. Once I am done just stepping this data object I can then call a purge method that will destroy the vm. This will then fire the destroy hook where I set the inner html of the container element to the last value of the count property in the data object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
  <head>
    <title>vue destroyed lifecycle example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo"></div>
  <script>
new Vue({
    el: '#demo',
    template: '<div>' +
    '<p>count: {{c}}</p>' +
    '<input type=\"button\" value=\"step\" v-on:click=\"step\">' +
    '<input type=\"button\" value=\"purge\" v-on:click=\"done\"></div>',
    destroyed: function () {
        // make the innerhtml of DEMO div just the count value
        this.$el.innerHTML = this.$data.c;
    },
    data: {
        c: 0
    },
    methods: {
        step: function () {
            this.c += 1;
        },
        done: function () {
            // start destroy
            this.$destroy();
        }
    }
});
  </script>
  </body>
</html>

So this might not be the most compelling example of the vuejs destroyed life cycle hook in action, but the aim here was a basic example of the use of a hook after all and basic examples to tend to be not so compelling. The goal here was just to demonstrate the basic idea of the vue destroyed hook after all and that is what this is.

However a real example might not be that much more advanced then this. Say I have a game where there is a main vuejs instance that will spawn additional vuejs instances that are used to generate game money. One option for each of these child instances is for the asset to be sold, so then the destroyed instance would be a great place to add the amount of money that the child instance is worth to a value in the data object of the main instance.

2 - Conclusion

So that is it for not on the vuejs destroyed life cycle hook. I am trying to gear myself into spending a little more time on expanding my content on vuejs, as well as updating, editing, and expand my content on vuejs including this post also. With that said it is only a matter of time until I get around to this post, so hopefully I will expand this more then with a few additional examples of the destroyed life cycle hook as well as link to some additional posts on full examples that make use of this hook.

I have been neglecting my content on vuejs, so to help get me in gear for changing that I thought I would write this quick post on the destroyed life cycle hook as a way to continue expanding on vuejs. I have wrote a post on vue delete method also that has to do with deleting object properties rather than a whole vue instance on its own. Most of my time is going into editing my collection of vuejs examples though, and so far in most of those examples I am reusing objects and vue instances rather than deleting them.

So far I can not say I actually use the destroy method and the hooks that will fire when an instance in examples thus far. One reason why that might be is that I often create projects where I just simple reuse a fixed set objects over and over again rather than creating and destroying objects as needed. This is not just something that I do with vuejs instances, and objects in the data object of vue instances, but with javaScript projects in general actually. When it comes to my canvas examples I have an canvas example on a basic object pool module that I worked out where I am just working with a fixed set of objects. Each object has an active flag that I use to find out if something should be rendered for the object or not, of if the object should be used when it comes to updating something.