vue 生命周期4 销毁流程 beforeDestroy destroyed_vue beforedestroy

销毁流程：

 

当调用了vm.$destroy 则触发销毁流程

验证下：

加一个按钮和销毁事件

 

效果：

发现点击了vm销毁,但是页面上仍不变

因为虽然vm没了但是vm的工作成果还是在的

并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了

再点加1就发现不好用了 

发现vue的开发者工具上也没有了任何东西了

 验证：指令也不奏效

 点击n加1发现页面都不变了说明指令也不奏效了 

验证事件监听器也不奏效了

 但发现在销毁之后点击n++,仍能触发事件

因为这边的click方法是原生jsdom实现,也是杀死vm它仍存在

而官网说的事件监听器,指的是自定义事件

2.beforeDestroy

销毁前 

验证watch关闭了

发现当销毁后,就留下了一个原生js实现的click事件回调

 验证：data和methods都处于可用状态

发现仍能输入n,说明data还可以用

发现方法仍能被调用,但是页面不变！！！！！

为什么没有变成2？？？？

以为,这边其实进行了n++代码

但是在beforeDestroy是在销毁前有关vue销毁实例的所有数据都不会触发更新了

也就是说到了beforeDestroy虽然可以调用data可以调用方法,但是所有数据都不会发生更改了

验证数据不会更改了

页面没有发生更改,说明数据在beforeDestroy之后就不会发生更改了

 在updated中就可以

 

也就是说除非把数据修改放在这两个钩子里数据再也不会触发更新了,都快销毁了就别再修改数据了,再做点善后的事就行了,关闭点定时器,自定义事件等等

3.

 消除了定时器,子组件,和自定义事件

4.destroy

被忽略最严重的钩子,只要知道有这么一个钩子就行