使用Vue有一段时间了，也经历了几个项目的实战，但发现自己对Vue的理解还是不够深刻，很多时候偶然看到Vue文章才发现原来Vue还可以这么玩。所以决定重新观看Vue的文档深入理解，并写下一些笔记以供记忆。

个人觉得使用Vue之前，需要了解整个Vue的生命周期，清楚的认识到Vue在每个阶段的钩子函数，这样才可以更好让我们去使用Vue。

综述

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

浅显的来说，生命周期的钩子函数就是回调函数，在不同的阶段有不同的回调函数供用户处理自定义的事件。

Vue官方文档-生命周期

生命周期图例

从我的理解来说，Vue的生命周期主要可以分为四大部分，实例化（created），挂载/渲染（mounted），更新（updated），销毁（destroyed），这也是平时使用最多的钩子函数。

下面是完整的Vue生命周期图例。

Vue生命周期

实例化

beforeCreate

组件实例刚被创建，还没有计算组件属性，无法访问data值；一般在此阶段可以加载个一个loading事件。

此时访问data和$el都是undefined

created

组件已经绑定属性，但仍未渲染模板。就是说在created的钩子函数中，你可以处理data的数据，但是无法访问$el，此时$el的值为“虚拟”的元素节点，也就是在此阶段，你无法进行Dom的操作。如果你需要在created的时候进行Dom的处理，请务必在Vue.nextTick()函数中操作。

在这个阶段，一般做一些初始化操作，初始化一些自执行函数。

挂载/渲染

beforeMount

组件模板挂载/渲染之前的钩子函数，此阶段已经完成了$el和data初始化，但未挂载组件

mounted

在此阶段，组件已经编译完成并进行渲染，可以访问$el并进行Dom操作，但是需要注意一点的是，这里并不能保证组件已经存在document中。此阶段相当于在created中使用Vue.nextTick()。

此阶段一般执行数据请求，从后端获取数据。

更新

beforeUpdate

顾名思义，这个是在数据更新之前的钩子函数，可以处理数据保存之类的事件。

updated

这是在数据更新后的钩子函数，在此阶段，数据已完成更新,与数据绑定的Dom也已经渲染完成。

销毁

beforeDestoroy

组件销毁之前的钩子函数，一般在此阶段执行数据销毁的函数

destroyed

组件已经销毁，无法访问组件的任何信息。

栗子

var app = new Vue({
    el: '#app',
    data: {
    },
    beforeCreate(){
        <!--无法访问data属性和$el-->
    },
    created(){
        <!--已绑定data属性，但无法访问$el-->
    },
    beforeMount() {
        <!--可以访问$el,但组件未渲染-->
    },
    mounted() {
        <!--已完成组件渲染，可正常操作-->
    },
    beforeUpdate() {
        <!--数据更新前的钩子函数-->
    },
    updated() {
        <!--数据已更新，相关dom已重新渲染-->
    },
    beforeDestroy() {
        <!--销毁组件前的钩子函数-->
    },
    destroyed() {
        <!--组件已销毁-->
    }
})

原文链接-疯子的博客