Vue学习:生命周期的销毁流程_vue 页面销毁

vm.$destroy()：完全销毁一个实例，和她下面的组件连接，解绑她的所有指令和事件监听器

    <div id='root' :x="n">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点击n+1</button>
        <button @click="bye">点击销毁vm</button>
    </div>
 
   methods: {
            add() {
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy();
            }
 
        },

Vue工作成果还在，但是其中的对vm操作已经没有用了

    <div id='root' :x="n">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点击n+1</button>
        <button @click="bye">点击销毁vm</button>
    </div>

验证指令失效

beforeDestroy：可以访问，可以操作，对页面不会产生效果

destroyed