vue.js app.$destroy() 不会删除应用实例答案

【问题标题】：vue.js app.$destroy() does not remove app instancevue.js app.$destroy() 不会删除应用实例
【发布时间】：2018-11-14 11:09:06
【问题描述】：

我正在学习 vue js。我有一个名为 growler 的应用程序。我正在尝试调用按钮的$destroy 方法on-click。

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

如果我将方法作为 Javascript 事件的一部分，它就可以工作。

 <script type="text/javascript">
           document.getElementById('destroyButton').addEventListener('click', function() {
                growler.$destroy();
            }); 
</script>

但是，如果我将此方法作为 vue on-click 事件的一部分调用，则它不起作用。

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

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

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

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

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

你能告诉我为什么它不能作为点击事件方法的一部分工作吗？应用实例不会被破坏。

【问题讨论】：

$destroy() 是否被应用在根 Vue 实例上？
@JacobGoh 是的。我也尝试在 onDestroyClick 函数中使用 growler.$destroy() 。它没有工作:(
当我在 jsfiddle.net/u157emcr/3 中测试它时，DOM 元素在销毁后会保持不变。您如何判断应用程序是否被破坏？你的 Vue 代码看起来很好而且没有错误。
在这种情况下，该错误可能未包含在您提供的信息中。尝试创建一个MCVE jsfilddle ？
@JacobGoh，大括号似乎有问题。它现在在jsfiddle 中运行良好。对此感到抱歉。

标签： javascript vue.js event-handling dom-events destroy

【解决方案1】：

在这里添加答案，正如刚刚在 cmets 中提到的那样。

这是大括号的问题。代码贴在下面：

对应的jsfiddle是here

    var growler = new Vue({
                    el: '#growler',
                    data :
                    {
                     message : "test"
                    },

                    methods: {                   
                        onDestroyClick: function() {
                            this.$destroy();
                        } 
                    },
                   beforeDestroy: function() {
                       console.log('beforeDestroy');;
                    },

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

【讨论】：