这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
前言
吃饱饭才有力气写代码~
在Vue基础-2 中我们介绍了组件相关知识点，今天我们来理一理Vue的生命周期，之前面试的时候遇到过好多次这个问题，现在来搞搞清楚！
生命周期
首先来了解一下什么是生命周期：Vue的每个组件都有自己的生命周期，具体来说就是从这个组件被创建开始，经历数据初始化，挂载，更新，到最终被销毁；这一整个过程就是所谓的生命周期！ Vue官网的示意图如下：
从上至下依次是：
- 构造函数生成 Vue 实例；
- 事件和生命周期钩子初始化；
- beforeCreate 在实例初始化之后，data observer（数据观测） 和事件配置之前被调用，这个时候组件的选项对象还没有创建，el 和 data 还没有初始化。这个时候还不能访问methods、data、computed 等数据和方法！
- 初始化 inject provide state 属性；
- created 实例已经创建完成之后被调用；data 已经初始化、计算属性、event/watch事件回调、但dom 树并未挂载；这个时候可以调用methods里的方法，改变data中的数据，并且修改可以通过 Vue 的响应式绑定展现在页面上！
- 是否有 el 对象；
- 没有就挂载；
- 是否有模板；
- 有就把模板转化为 render 函数，通过render函数进行dom树的创建和渲染；
- 没有模板就编译el对象，把外层html作为模板；
- beforeMounted 在挂载开始前被调用，render函数首次被调用生成虚拟dom;也就是说实例已经完成了以下的配置：编译了模板，把data里的数据和模板生成了html,完成了el和data的初始化；但是还没有挂到html页面上！
- 创建Vue 实例下的$el，并替换真正的dom;
- mounted 挂载完成，dom树已经渲染到页面，可以进行dom操作；
- beforeUpdate 数据有更新被调用
- 虚拟dom重新渲染补丁
- updated 数据已经更新完
- beforeDestroy 实例销毁之前调用，在这之前还可以访问实例的数据
- 清除 watcher、子组件、事件监听器等
- destroyed 组件销毁后调用
- 组件已经被销毁
具体每一个钩子函数的效果，可以通过编写代码查看！
