Vue实例的生命周期

直接上图

从图中可以看出一个Vue实例的诞生到销毁有如下阶段：

beforeCreate -> created -> 判断是否有el选项与template模板 ->beforeMount -> mounted -> 监听数据的更新 -> beforeUpdate -> updated -> beforeDestroy -> destroyed

在不同的阶段会运行一些叫做生命周期钩子的函数，那我们便可以在合适的阶段，添加自己的代码来实现某种需求。

• beforeCreate

在实例刚刚初始化之后调用，data没有初始化，DOM元素更别提了，八字还没一撇呢。

• created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。所以我们如果在这个周期里面请求数据并且请求时间过长，那么会导致页面长时间空白。

• beforeMount

数据完成了初始化，但是DOM未完成挂载。在挂载开始之前被调用，相关的render函数首次被调用。

• mounted

el被新创建的#vm.$el替换，并挂载到实例上去之后调用该钩子。官方文档指出，mounted不会承诺所有的子组件也都一起被挂载。

• beforeUpdate

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

• updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。注意 updated 不会承诺所有的子组件也都一起被重绘。

• beforeDestroy

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

• destroyed

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

生命周期钩子的内容远不止这些，比如vm.$nextTick，但先放一放，按部就班的先巩固最最基础的内容。