Vue2 父子组件的生命周期函数执行顺序

前言

vue2的生命周期函数在实际工作中经常使用。我们也能清楚的知道他们的执行顺序是怎么样的。但是如果我们问到
父组件Father 和 子组件Child之间的生命周期函数的执行顺序是什么?
这时候会难倒很多小伙伴。

所谓实践出真知,我们就开始创建一对父子组件来进行验证

实践出真知

当前vue 版本 2.6.11

代码

Father.vue



Child.vue




分析

运行页面之后(页面创建和挂载),我们可以看见控制台打印如下

image.png

由此我们可以得出结论:
在页面挂载阶段顺序是

  • 先创建父组件的dom,然后父组件等待挂载
  • 这时候再创建子组件的dom, 先挂载子组件
  • 最后挂载父组件。

即先挂载子组件,再挂载父组件

组件销毁阶段

接下来研究组件的销毁阶段

首先在之前代码的基础上,我们得设置一个跳转页面的函数,这样就相当于销毁了他们父子俩, 上面的代码中应包含,跳转的路由请自行添加

这时候我们点击**跳转, **就会跳转到新的页面 /detail, 销毁了前面的Father和Child 组件。这时候我们来看看控制台的打印信息


image.png

由此我们可以得出结论:
在页面销毁阶段顺序是

  • 准备销毁父组件(beforeDestory)
  • 销毁子组件
  • 销毁父组件

即先销毁父组件再销毁子组件

结论

// 创建挂载时机
father beforeCreate
father created
father beforeMount
child beforeCreate
child created
child beforeMount
child mounted
father mounted

// 销毁时机
father beforeDestroy
child beforeDestroy
child destroyed
father destroyed
  • 创建父组件
  • 创建子组件
  • 挂载子组件
  • 挂载父组件
  • 销毁子组件
  • 销毁父组件

如有不妥,欢迎指出

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