Published: Modified: V1.11
vuejs

vue destroy

The vue destroy instance method can be used to destroy a vue class instance in vuejs. This might not always work out as expected when you think of what might happen when calling a method called destroy, but it will to some extent do just that as the name would suggest.

I think that the vue destroy method should generally not be used, unless I am in a situation in which it would seem that I have to use it which might come up now and then in future projects. I often like to create client systems with a fixed set of resources and then just result those resources over and over again. For example there is having an array and then pushing objects into that array, and purging them out as needed. However I prefer to have a set array of objects, and then have an active property for each object. With that said often I think that I should try using directives like v-if, and f-for before looking into using the vue destroy method.

This vue instance method will trigger the before destroy and destroyed lifecycle hooks when called bring about the end of a vue instance lifecycle.

1 - vue destroy method basic example

Here I have a basic example of the vue destroy method in action. When this example is up and running a step button can be clicked until the kill button is clicked and calls the vue destroy method. Once this happens as expected the click method will no longer work, however the button itself as well as the current count before it is destroyed will remain.

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
<html>
  <head>
    <title>vue destroy example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo-destroy"></div>
  <script>
var vm = new Vue({
        el: '#demo-destroy',
        template: '<div>' +
        '<input type="button" v-on:click="step" value="step"> | ' +
        '<input type="button" v-on:click="kill" value="kill">' +
        '<p>i:{{i}}</p>' +
        '</div>',
        data: {
            i: 0
        },
        methods: {
            step: function () {
                this.$data.i += 1;
            },
            // kill this instance
            kill: function(){
                this.$destroy();
            }
        }
    });
  </script>
  </body>
</html>

So the destroy method will do several things that can be thought of as destroying a vuejs instance, but the use of it alone will not do everything that you might expect. So there lets look at some additional examples that have to do with cleaning up the additional things that might remain after calling the destroy instance method.

2 - The before destroy and destroyed Hooks

When a vue instance is destroyed the html for that vue instance will still be there. So there should be at least one additional step to be made when destroying a vue instance and that is changing or removing any html for the instance. One place to do this, and any additional things that should be done would be in the before destroy and destroyed life cycle hooks.

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
35
36
37
38
<html>
  <head>
    <title>vue destroy example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="demo-destroy"></div>
  <script>
var vm = new Vue({
        el: '#demo-destroy',
        template: '<div>' +
            '<input type="button" v-on:click="step" value="step"> | ' +
            '<input type="button" v-on:click="kill" value="kill">' +
        '<p>i:{{i}}</p>' +
        '</div>',
        data: {
            i: 0
        },
        beforeDestroy: function(){
            console.log('almost done');
        },
        destroyed: function(){
            console.log('done');
            this.$el.innerHTML = '<p>done</p>';
        },
        methods: {
            step: function () {
                this.$data.i += 1;
            },
            // kill this instance
            kill: function(){
                this.$destroy();
            }
        }
    });
  </script>
  </body>
</html>

3 - Conclusion

So far I can not say that I use the destroy method in projects as I often just reuse the same stack of resources over and over again rather than creating and destroying as needed. There is looking into how to mop up everything that might happen when killing a vue instance, but there is also not killing anything to begin with. With any project there is a kind of max number of something that I keep in mind with things including a max number of vue instances for something. So there is just creating that number of instances and just making them active or inactive as needed.