Vue的生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程。

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

1. beforeCreate（创建前）
2. created（创建后）
3. beforeMount(载入前)
4. mounted（载入后）
5. beforeUpdate（更新前）
6. updated（更新后）
7. beforeDestroy（销毁前）
8. destroyed（销毁后）

beforeCreate（创建前）

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

created（创建后）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。beforeCreate和created的钩子调用是在initState函数的前后，initState的作用是初始化props、data、methods、watch、computed等属性，beforeCreate的钩子函数中就不能获取到props、data中定义的值，也不能调用methods中定义的函数，而created可以。在这俩个钩子函数执行的时候，还没有渲染 DOM，所均访问不到DOM

一般来说，如果组件在加载的时候需要和后端有交互，放在这俩个钩子函数执行都可以，如果是需要访问props、data等数据的话，就需要使用created钩子函数

beforeMount(载入前)

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

mounted（载入后）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

beforeMount和mounted函数执行在Vue实例挂载阶段，它们的调用时机是在mountComponent函数中。Vue组件在实例化的时候会先等待子组件的实例化完成，所以insertedVnodeQueue(保存组件的mounted钩子函数的数组)的添加顺序是先子后父

beforeUpdate（更新前）

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

updated（更新后）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

beforeUpdate和updated的钩子函数执行时机都是在数据更新的时候，beforeUpdate的执行时机是在 渲染Watcher 的before函数中，update的执行时机是在flushSchedulerQueue函数调用的时候

beforeDestroy（销毁前）

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

destroyed（销毁后）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

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

beforeDestroy和destroyed钩子函数的执行时机在组件销毁的阶段。beforeDestroy钩子函数的执行时机是在destroy函数执行最开始的地方，接着执行了一系列的销毁动作，包括从parent的children中删掉自身，删除watcher，当前渲染的VNode执行销毁钩子函数等，执行完毕后再调用destroy钩子函数 在$destroy的执行过程中，它又会执行vm.patch(vm._vnode, null)触发它子组件的销毁钩子函数，这样一层层的递归调用。所以destroy钩子函数执行顺序是先子后父，和mounted过程一样

总结

beforeCreate（创建前）什么都未初始化；
created（创建后）props、data、methods、watch、computed等属性已经初始化可以获取；
beforeMount（载入前）仍不能获取具体的DOM元素，但vue根节点已经挂载；
mounted（载入后）数据和DOM都已经渲染；
beforeUpdate（更新前）数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用；
updated（更新后）DOM会和更改过的内容同步；
beforeDestroy（销毁前）清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件，销毁前触发；
destroyed（销毁后） 执行先子后父，先销毁子组件再销毁父组件。