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.

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 callback delayed by setTimeout files 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
var vm = new Vue({
el: '#demo-destroy',
template: '<div>' +
'<input type="button" v-on:click="step" value="step">' +
'<p>i:{{i}}</p>' +
'</div>',
data: {
i: 0
},
methods: {
step: function () {
this.$data.i += 1;
}
}
});
setTimeout(function () {
vm.$destroy();
}, 5000);