Vue组件的生命周期

首先让我们来看一下经典的vue生命周期示意图：

针对上图生命周期序号下表进行解释：

1.new vue() : 这是new了一个vue的实例对象；此时就会进入组件的创建过程。

2.Init Events & Lifecycle ：初始化组件的事件和生命周期函数；当执行完这一步之后，组件的生命周期函数就已经全部初始化好了，等待着依次去调用。

3.beforeCreate ：

官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

解释：这是第一个生命周期函数；此时，组件的data和methods以及页面DOM结构，都还没有初始化；所以此阶段，什么都做不了。

4.Init injections & reactivity ：这个阶段中，正在初始化data和methods中的数据以及方法。

5.created ：

官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

解释：这个组件创建阶段第二个生命周期函数，此时，组件的data和methods已经可以用了；但是页面还没有渲染出来；在这个生命周期函数中，我们经常会发起Ajax请求；

6.正在解析模板结构，把data上的数据拿到，并且解析执行模板结构汇总的指令；当所有指令被解析完毕，那么模板页面就被渲染到内存中了；当模板编译完成，我们的模板页面，还没有挂载到页面上，只是存在于内存中，用户看不到页面；

7.beforeMount :

官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。

解释：当模板在内存中编译完成，会立即执行实例创建阶段的第三个生命周期函数，这个函数就是beforeMount，此时内存中的模板结构，还没有真正渲染到页面上；此时，页面上看