深入浅出Vue生命周期钩子函数

首先，先展示官方的Vue生命周期钩子函数的图示

Vue生命周期钩子函数图示.png

在Vue2.0+版本，一个Vue实例共有以下八个生命周期钩子函数

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. destoryed

Lifecycle_hooks.png

beforeCreate
在实例初始化之后，但是el和data并未初始化

created
完成了data的初始化，但是el并没有初始化

beforeMount
完成了el和data的初始化
在挂载开始之前被调用：相关的render函数首次被调用。

mounted
完成挂载,el 被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
简单来说就是更新el所控制区域的编译模板

beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前

updated
当这个钩子被调用时，组件DOM已经更新，一般情况下，可以用计算属性computed或watch代替

beforeDestory
实例销毁之前调用。在这一步，实例仍然完全可用。

destoryed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。