vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

在这里借用Vue官方的一张图片

组件创建阶段

init Events & lifecycle

初始化事件和生命周期函数

beforeCreate

创建阶段第一个生命周期函数。组件的props/data/methods尚未被创建，都处于不可以状态，在这个阶段什么都做不了

init injections & reactivity

当前阶段表示正在初始化props，data，methos

created

组件的props，data，methods已经创建好，都处于可用状态，但是模板结构尚未构成。

通常此阶段用于调用methods方法，发起Ajax请求，并且将数据转存到data中

Has "el" option

会判断是否有el选项。

如果有el选项会走Yes判断是否有template选项。

如果没有el选项则会调用$mount方法

beforeMount

将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。没有什么意义

Create vm.$el and replace "el" with it

用内存中编译生成的HTML结构替换掉el属性指定的DOM元素

mounted

已经把内存中的HTML结构，成功的渲染到了浏览器之中。此时浏览器中已包含了当前组件的DOM结构。最早操作DOM结构的生命周期函数。

组件运行阶段

beforeUpdate

将要根据变化过后、最新的数据、重新渲染组件的模板结构。data的数据是最新的，但UI结构不是最新的

virtual DOM re-render and patch

根据最新的数据，重新渲染组件的DOM结构

updated

已经根据最新的数据，完成了组件DOM结构的重新渲染。此时UI结构跟data数据都是最新的

组件销毁阶段

beforeDestroy

将要销毁此组件，但还未销毁，组件还处于正常工作状态

Teardown watchers,child components and event listeners

销毁当前组件的数组侦听器、子组件、事件监听

destroyed

组件已经被销毁，此组件在浏览器中对应的DOM结构已经被完全移除