2.4　Vue生命周期

Vue实例在被创建之前都要有一个初始化过程，有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染到卸载等的一系列过程，被称为Vue的生命周期。通俗说Vue实例从创建到销毁的过程，就是生命周期。

2.4.1　Vue实例生命周期图解

Vue生命周期可以分为8个阶段：beforeCreate（创建前），created（创建后），beforeMount(载入前)，mounted（载入后），beforeUpdate（更新前），updated（更新后），beforeDestroy（销毁前），destroyed（销毁后），Vue官方称这些为钩子函数。

图2-6所示的Vue生命周期帮助大家理解Vue实例从创建到销毁的整个过程。使用new Vue()实例化，需要传入一些配置参数，实例创建之前调用beforeCreate()，这是生命周期钩子。然后进行数据的检测和监听的配置，init Events初始化事件，初始化写在HTML模板上绑定的事件methods。接下来就会检测是否有元素挂载点，如果没有元素挂载点，通过mount函数触发；如果已经触发或者有el挂载点，检测是否有template选项。模板组件可能没有，如果有，使用render function函数编译；如果没有，使用outerHTML作为模板。下面执行beforeMount生命周期钩子，处理完成后监测el对应的dom元素是否已经加载到文档流中，是否能获取到。如果能获取到则执行mounted检测数据；如果数据更新，则执行beforeUpdate。更新后有一个数据的响应机制，执行updated。如果实例销毁，在实例销毁之前，会解除事件绑定、数据监听、销毁组件等。

图2-6　Vue生命周期

2.4.2　Vue生命周期详解

对于执行顺序和什么时候执行，读者通过生命周期图解已经有所了解。下面将结合代码看看钩子函数的执行。代码框架如例2-10所示。

【例2-10】Vue生命周期详解。

根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明。

beforeCreate：在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。

created：在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中。

beforeMount：在mounted之前运行。

mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。

beforeUpdate：在实例挂载之后，再次更新实例（如更新data）时会调用该方法，此时尚未更新DOM结构。

updated：在实例挂载之后，再次更新实例并更新完DOM结构后调用。

beforeDestroy：在开始销毁实例时调用，此刻实例仍然有效。

destroyed：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。

activated：需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。

deactivated：需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法。

2.4.3　Vue各生命周期适合开发的业务逻辑

通过以上分析总结Vue生命周期在真实场景下的业务应用如下，会在后面的案例中具体使用。

created：进行AJAX请求异步数据的获取、初始化数据。

mounted：挂载元素内DOM节点的获取。

nextTick：针对单一事件更新数据后立即操作DOM。

updated：数据更新的统一业务逻辑处理。

watch：监听具体数据变化，并做相应的处理。