Vue 生命周期钩子函数在父子组件中的执行顺序

先附一张官网上的Vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。

1、Vue生命周期简介


Vue生命周期

在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。


生命周期钩子函数描述

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。


2、父子组件生命周期执行顺序

加载渲染过程:

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程:

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程:

父beforeUpdate->父updated

销毁过程:

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed


本文引用至:Vue父子组件生命周期执行顺序及钩子函数的详解

你可能感兴趣的:(Vue 生命周期钩子函数在父子组件中的执行顺序)