1 beforeCreated

在组件实例初始化完成之后立即调用。会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。

组件的组件实例初始化动作：初始化一个空的Vue实例对象，此时，这个对象身上只有一个默认的声明周期函数和默认事件，其他的东西都没未创建【数据代理等】

举例子说明：如下所示

2 created

在组件实例处理完所有与状态相关的选项后调用。当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

举例子说明：如下所示

3 beforeMount

在组件被挂载之前调用。表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中。



备注：在 beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。

4 mounted

在组件被挂载之后调用。挂载之后：表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。

重要：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted之后，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中，并且一动不动。

5 beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

举例说明这个问题：



重要：数据是新的，但是页面是旧的。

6 updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。**父组件的更新钩子将在其子组件的更新钩子之后调用。**这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

7 beforeDestroy

8 destroyed