Vue 组件的生命周期:
分为 四个阶段 :
1. created 创建阶段
2. mounted 挂载阶段
3. updated 更新阶段
4. destroyed 销毁阶段
八个钩子函数 ----->所谓钩子函数 其实就是 自动执行的回调函数而已
beforeCreate（创建前），data数据和#el 此时d都 为 undefined
created（创建后），完成数据加载，可以异步加载数据，比如：axios异步请求数据， $el 还没有显示出来 为undefined //推荐使用
坑：axios异步请求接口数据 当数据结构比较复杂时 ，页面的虽然可以正常显示数据，但是 当首次触发事件，浏览器会报类型错误 ：xxx
undefined
比如:
ERROR TypeError: Cannot read property "title" of undefined // angular 中 也会出现这种错误
解决：通常会将 请求回来的数据放在 data 数据模型中保存 比如： [ ] ，{ } ;在 数据或者对象中对要显示的数据 设置其默认值即可
beforeMount（载入前），在挂载开始之前被调用，实例已完成，此时有data数据。注意此时还没有$el 为undefined
mounted（载入后），此时有data数据也有$el，可以进行原生DOM元素 ，绑定事件处理函数 ,也可以异步加载数据，比如：axios异步请求数据，但是渲染页面时相对于created的速度比较慢
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以上首次加载-完成-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染之前。可以在该钩子中进一步地更改状态，不会触发重渲染过程。
updated（更新后），在由于数据更改导致的虚拟DOM重新渲染之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
vue官方文档:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
