【Vue生命周期详解】

什么是生命周期？

生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程。对于某个产品而言，就是从自然中来回到自然中去的全过程，也就是既包括制造产品所需要的原材料的采集、加工等生产过程，也包括产品贮存、运输等流通过程，还包括产品的使用过程以及产品报废或处置等废弃回到自然过程，这个过程构成了一个完整的产品的生命周期。

Vue的生命周期

在面向对象的语言中，存在这个概念，就是说：变量，对象，等，在定义了之后，可以进行相关的操作，但是，有可能在某种条件下他们就不需要了，这个时候就可以进行销毁，析构函数，起的就是销毁一个对象，目的是回收一部分内存，这就和人的“生命周期”是一样的，这个变量和或对象就不存在了！

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

下例图展示了Vue的生命周期：

在Vue的生命周期中，可分为四部分八个函数，分别是创建（beforeCreate（），created （）），挂载（beforeMount（），mounted（）），更新（beforeUpdate（），updated（）），销毁（beforeDestroy（），destroyed（）），通常我们把这八个钩子归为四个模块，也就是上面说的四块流程。

beforeCreate( 创建前 )：

作用：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。因此无法访问methods， data， computed等上的方法和数据

注意：此时的el还没有被加载。

created ( 创建后 ）：

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

beforeMount：

在挂载开始之前被调用：相关的 render 函数首次被调用。（render（）----虚拟DOM），vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

注意：该钩子在服务器端渲染期间不被调用。

mounted：

实例被挂载后调用，这时 el 被新创建的vm.$ el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$ el 也在文档内。
*注意：注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick： *

该钩子在服务器端渲染期间不被调用

beforeUpdate：

当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行

updated：

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

beforeDestroy：

当实例销毁之前调用。在这一步，实例仍然完全可用。
this还可以获取到实例

该钩子在服务器端渲染期间不被调用

destroyed：

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用

参考Vue API官网