Vue2.0 生命周期 销毁流程

Vue官网_生命周期图示
从图上的流程来说你想要走销毁流程就必须先走when vm.$destroy() is called

when vm.$destroy() is called

when vm.$destroy() is called:当vm.$destroy()方法被调用的时候

只要你调用了vm.$destroy()方法，Vue就把自己给销毁了
测试:

<div id="root">
    <h2>当前n的值:{{n}}</h2>
    <button @click="n++">点我,n++</button>
    <button @click="bye">点我销毁vm</button>
</div>

methods: {
    bye(){
        console.log('bye')
        this.$destroy()
    }
},

vm确实销毁了,但是页面上怎么还有东西?
vm确实销毁了，但是销毁vm临死之前的结果还在

这就完结了?
里面还有一些细节上的东西
查阅Vue官网

清理它与其它实例的连接

是这样:这个Vue无论是你写错了代码人家报错还是你翻阅人家官方文档 它始终站在一个组件化编码的思维方式去给你提示给你报错

这里所描述的这段话意思是:其它实例其实是组件实例对象(VueComponent),一个应用确实只有一个vm,但是一个vm有一堆一堆的组件实例对象(一个微型的vm)

解绑它的全部指令及事件监听器。

vm如果被销毁了，那么曾经它所用的指令全都废了，事件监听器也废了
验证:

<div id="root">
    <h2 v-text="n"></h2>
    <h2>当前n的值:{{n}}</h2>
    <button @click="add">点我,n++</button>
    <button @click="bye">点我销毁vm</button>
</div>

销毁了vm,v-text就不起作用了

add(){
    console.log('add')
    this.n++
},

但是一点销毁点击add，事件回调还在进行,这里的事件监听器说的不完整,这里指的是自定义事件，而不是原生的DOM事件

之后走的就是beforeDestroy

beforeDestroy(生命周期函数)

销毁之前(没有销毁)
此时:vm中所有的:data、methods、指令等等，都处于可用状态，马上执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等等收尾操作

Teardown watchers child components and event listeners

Teardown:移除
watchers:所有的监视
child components:字组件
event listeners:事件监听器(指的是自定义事件)

验证一下watchers:

watch:{
    n(){
        console.log('n变了')
        
    }
},

add
n变了
beforeUpdate
updated

点击销毁vm
就留下了原生的事件回调

所以watch也没有了

vm中所有的:data、methods、指令等等，都处于可用状态

验证:
1.是否执行了

beforeDestroy() {
    console.log('beforeDestroy')
},
destroyed() {
    console.log('destroyed') 
},

2.能不能访问到数据:

beforeDestroy() {
    console.log('beforeDestroy')
    console.log(this.n)//data里面的数据
    this.add()//能不能调用方法
},

bye
beforeDestroy
1
add
destroyed

add的确执行了，但是发现页面没有变化,原因

一上来就是点击了销毁按钮执行了beforeDestroy在里面调用了add,其实this.n++走了，但是由于你处在的时间点很尴尬，你是已经在它进入销毁流程的时候里的销毁之前去调用，你在这里对数据进行的所有操作都不会在更新了。事实是只要进入了beforeDestroy你可以访问到数据和方法，但是修改数据无法再更新了，更新数据唯独放在beforeDestroy和destroy时，不会再触发更新了

destroy(生命周期函数)

已经销毁了