Vue生命周期

Vue 生命周期图示

# beforeCreate：

beforeCreate() {
	console.log(this)
	debugger
},

查看此时的 this 指向，还没有_data，页面数据也没有展示

# created：

vue 实例已经有了_data, 但是页面数据还没有呈现，数据监测和数据代理都已经有了。

# beforeMount：

# mounted：

此时页面已经有数据展示

# beforeUpdate:

点击修改，数据已经被修改，但是页面还没有更新

# updated:

页面和数据保持一致

# beforeDestroy：

在 beforeDestroy 之后调用 update 函数，虽然方法可以被调用，vm 中的数据被更改，但是页面数据不发生变化

beforeDestroy() {
	console.log('beforeDestroy')
	this.update();
},

# destroy：

vm.$destroy()

完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器

调用 vm.$destroy (); 虽然页面数据还在，但是再点击修改等操作，页面不发生变化。

点击销毁，然后查看 vm.name 是‘小明’，然后调用修改函数，再次查看 vm.name 是‘李华’，但是页面数据并没有发生变化。

点击销毁，之后点击修改，发生修改的事件可以一直被调用，但是页面不发生变化。vm.$destroy 解绑的是自定义事件。完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

watch 监听事件，在被销毁之后也不会触发