Javascript vue.js应用程序。$destroy（）不删除应用程序实例

我正在学习vue js。我有一个叫growler的应用程序。我试图在点击按钮时调用

$destroy

方法

<button id="destroyButton" class="btn btn-danger" v-on:click="onDestroyClick">Destroy</button>

我为实例的不同事件设置了生命周期挂钩。我正在尝试将它们记录在控制台中

beforeDestroy: function() {
                    console.log('beforeDestroy');
                },

                destroyed: function() {
                    console.log('afterDestroy');
                }

这在Javascript事件侦听器中运行良好。我可以在控制台日志中看到销毁消息

---

你能告诉我为什么它不能作为点击事件方法的一部分工作吗。应用程序实例未被销毁

在这里添加答案，正如刚才在评论中提到的那样

这是苞片的问题。代码粘贴在下面：

相应的JSFIDLE是

var-growler=新的Vue({
el:“#咆哮者”，
数据：
{
信息：“测试”
},
方法：{
onDestroyClick:函数（）{
这个.$destroy（）；
} 
},
beforeDestroy:function（）{
console.log（'beforedostroy'）；；
},
afterDestroy:function（）{
console.log（'afterDestroy'）；
} 
});

是否将

$destroy（）

应用于根Vue实例？@JacobGoh yes。我试过使用growler。$destroy（）也在onDestroyClick函数中。它不起作用：（当我在中进行测试时，DOM元素在销毁后将保持不变。您如何判断应用程序是否被销毁？您的Vue代码似乎很好且没有错误。在这种情况下，您提供的信息中可能不包含错误。尝试创建jsfilddle？@JacobGoh，大括号似乎有问题。它现在在中工作正常。因此我对此感到担忧。

methods: {
                  onDestroyClick: function() {
                        this.$destroy();
                    } 
                }

beforeDestroy: function() {
                    console.log('beforeDestroy');
                },

                destroyed: function() {
                    console.log('afterDestroy');
                }