页面中有父子组件,生命周期顺序如何执行?(面试高频 一篇搞懂)

简介: 在实际开发中,一个页面经常会有父组件和子组件,那么在这个页面中,对于父子组件他们的生命周期又是如何执行的呢?看了一些网上的文章资料,竟然有些讲解写的是错误答案,带偏大家,所以在本文利用实践得出结论,带大家彻底搞懂这个知识点~

前言

之前一篇文章详细讲解了Vue2生命周期的过程 —> Vue2生命周期详解
在实际开发中,一个页面经常会有父组件和子组件,那么在这个页面中,对于父子组件他们的生命周期又是如何执行的呢?看了一些网上的文章资料,竟然有些讲解写的是错误答案,带偏大家,所以在本文利用实践得出结论,带大家彻底搞懂这个知识点~

创建子组件和父组件

这里我就写一个页面,在里面创建子组件和父组件

let item = Vue.component('item', {
   template: `<div>
           <h1>{{item}}</h1>
           <h2>{{num}}</h2>
       </div>`,
   data() {
       return {
           item: '我是子组件',
           num: 0
       }
   },
 }
let vm = new Vue({
  el: "#app",
  data: {
      name: 'casey',
      flag: true
  },
}
<div id="app">
    name={{name}}
    {{flag}}
    <button @click="flag = !flag">切换</button>
    <item v-if="flag"></item>
</div>

因为这里要讲子组件销毁过程,所以就简单写了一个按钮绑定flag,点击则子组件消失,执行销毁过程
下面就是在上面定义好的子组件和父组件中进行生命周期打印,这里就不展示了,直接看结果

页面创建过程生命周期

打开页面,查看打印
很显然,页面创建的过程是这样的:父组件挂载之前会去寻找子组件,然后执行子组件的创建前后和挂载前后,然后再执行父组件的挂载后

  1. 父创建前beforeCreate
  2. 父创建之后created
  3. 父挂载之前beforeMount
  4. 子创建前beforeCreate
  5. 子创建之后created
  6. 子挂载之前beforeMount
  7. 子挂载之后mounted
  8. 父挂载之后mounted

在这里插入图片描述

子组件销毁过程生命周期

点击页面按钮,执行子组件销毁,来看看页面生命周期如何执行:
子组件销毁的时候,会先执行父组件的更新前,再执行子组件的销毁前后,再执行父组件的更新后

  1. 父更新之前beforeUpdate
  2. 子销毁之前beforeDestroy
  3. 子销毁之后destroyed
  4. 父更新之后updated

在这里插入图片描述

最后

父子组件的问题会经常在开发中涉及到,掌握好它们生命周期的执行顺序才能把握好代码逻辑,有补充欢迎评论区指出,对你有帮助点赞支持下呀~

相关文章
|
1月前
|
Web App开发 缓存 前端开发
【面试题】从输入 URL 到页面显示,这中间发生了什么?
【面试题】从输入 URL 到页面显示,这中间发生了什么?
|
1月前
|
JavaScript 前端开发 API
面试官:ui组件可以自动加载,那么业务组件可以吗?
面试官:ui组件可以自动加载,那么业务组件可以吗?
|
4月前
|
存储 Java API
【面试题精讲】javaNIO的核心组件
【面试题精讲】javaNIO的核心组件
|
5月前
|
JavaScript 前端开发
前端经典面试题 | Vue组件间的通信方式
前端经典面试题 | Vue组件间的通信方式
|
24天前
|
调度
【面试问题】说说线程的生命周期?
【1月更文挑战第27天】【面试问题】说说线程的生命周期?
|
5月前
|
Java 程序员 Spring
Spring中bean类的生命周期|面试必问如何回答
Spring中bean类的生命周期|面试必问如何回答
|
1月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
35 0
|
1月前
|
缓存 网络协议 前端开发
面试题:浏览器中输入URL返回页面过程?
面试题:浏览器中输入URL返回页面过程?
65 0
|
1月前
|
Java Spring 容器
面试题:怎样为组件在创建的时候指定执行一个函数,在销毁的时候也先执行一个函数
面试题:怎样为组件在创建的时候指定执行一个函数,在销毁的时候也先执行一个函数
14 0
|
1月前
|
XML Java 数据格式
面试题:怎样把所有的组件的lazy-init值都设置为默认true?
面试题:怎样把所有的组件的lazy-init值都设置为默认true?
14 0