简单总结分析vue生命周期

生命周期：

每一个vue实例从创建待销毁的过程，就是这个vue实例的生命周期，在这一过程中，他经历了从开始创建、初始化数据、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列过程。

注：vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

vue生命周期可以分为八个阶段，分别是：

beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)

1、创建前（beforeCreate）

此阶段为vue实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

此阶段vue实例已经创建，但获取不到DOM元素。

beforeCreate和created函数都是在实例化Vue的阶段，在_init方法中执行的。beforeCreated和created的钩子调用是在initState函数的前后,initState的作用是初始化props、data、methods、watch、computed等属性，beforeCreated的钩子函数中就不能获取到props、data、methods、中定义的值和定义的函数，而created可以。这俩函数执行时，还未渲染DOM。

注：如果组件在加载时需要和后端有交互，放这俩函数中执行都可以，如果需要访问props、data中的数据的话，就需要使用created钩子函数。

3、载入前（beforeMounte）

此阶段依旧得不到具体的DOM，但vue挂载的根节点已经创建，之后vue对DOM的操作将围绕根元素继续进行；beforeMounted这个阶段是过渡性的。用到的场景不多。

4、载入后（mounted）

项目中最常用到的钩子函数，常用于写异步请求。此阶段，数据已初始化完毕、DOM也渲染完毕。

注：beforeMounte和mounted函数执行在Vue实例挂载阶段，他们的调用实际是在mounteComponent函数中。Vue组件在实例化的时候会先等待子组件的实例化完成，所以保存组件的mounted钩子函数的数据的添加顺序是先子后父。

5、更新前（beforeUpdate）

此阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后（updated）

此阶段DOM会和更改过的内容同步。

注：beforeDestroy和updated的钩子函数执行时机都是在数据更新的时候。

7、销毁前（beforeDestroy）

在上阶段vue已经成功通过数据驱动DOM更新，当我们不再需要操纵DOM时，就需要销毁Vue,也就是清楚vue实例与DOM的关联，掉用户destroy方法就可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

在销毁后会触发此钩子函数。

vue的生命周期思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，可以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

注：destroy钩子函数执行顺序是先子后父，和mounted过程一样