首页 > 其他分享 >Vue父子组件生命周期执行顺序

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

时间:2024-06-07 16:59:44浏览次数:22  
标签:生命周期 beforeCreate dom create Vue 组件 mounted 顺序

顺序

执行顺序:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载,即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。

在单一组件中,钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed,但当父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数,这些父子组件的这些钩子是如何交融执行,且执行顺序又是怎样的呢?

原理理解

父组件先create子组件才能create,子组件先渲染,接着才渲染父组件的元素

附:浏览器dom渲染机制

image

  • render阶段
    1、先构建html dom树
    2、接着构建css规则树
    3、合并dom树,和css规则,生成render树
  • paint阶段
    绘制页面像素信息
    gpu再显示到屏幕

标签:生命周期,beforeCreate,dom,create,Vue,组件,mounted,顺序
From: https://www.cnblogs.com/jocongmin/p/18237475

相关文章

  • 基于SpringBoot+Vue的校园驿站管理系统设计与实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • 基于SpringBoot+Vue的二手手机交易平台的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • Vue3等比例缩放图片组件
    本文由ChatMoney团队出品有些情况我们需要在各种刁钻的情况下都要保持图片比例不变,比如用户缩放窗口等改变布局的情况。实现原理就是通过容器的宽度和内边距在保持你想要的比例。以下是基础功能的组件示例:<template><divstyle="position:relative":style="ratioStr"......
  • vue+cesium+heatmap.js 实现热力图
    效果如下图:1.安装heatmap.jsnpmi heatmap.js官网:heatmap.js:DynamicHeatmapsfortheWeb(patrick-wied.at)2.把这两个文件放到项目里heatmap.jsimportutilfrom"./util"importh337from'heatmap.js'/***@description二维热力图类,基于h337类扩展*@......
  • vue3+TypeScript
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快......
  • React Native:尝试使用手势处理使文本组件可拖动时出现渲染错误
    我正在ReactNative应用程序中开发一项照片编辑功能,用户可在其中添加可拖动的文本覆盖。我使用钩子来管理文本块的位置,并通过手势处理来更新它们。但是,当我尝试在手势过程中更新这些文本元素的位置(例如拖动)时、我遇到了一个呈现错误:"呈现的钩子比上一次呈现时多。我怀......
  • Vue的data中对象新增属性后,页面却不渲染(未渲染)
    前提背景:在data中定义了一个数组 usableList:[],给数组中的每个对象添加checked属性(用来查看数据的勾选状态) 问题:勾选后,数组的数据已经改变了,但是未渲染到页面中 问题原因:在于在Vue实例创建时,对象新增的属性并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视......
  • vue3多个表单一起校验
    当定义了多个表单但是保存时需要同时校验的时候可以这样做<template><el-form:model="userForm1"label-width="auto"ref="userFormRef1"></el-form><el-form:model="userForm2"label-width="auto......
  • 【S082】Springboot+Vue电子商城购物系统 购物 商务 前后端分离 含文档
    运行截图:用户登陆商城首页商品分类商品详情页我的购物车下单页面我的订单后台首页用户管理头像管理商品分类管理轮播图管理商品管理订单管理图表分析收入排行榜项目组成:项目源码:项目文档:源码获取⬇⬇⬇......
  • vue2使用Clodop插件打印表格,分页,每页显示页头页尾,自定义纸张大小
    一、前往lodop官网,下载插件,下载中心-Lodop和C-Lodop官网主站 这里下载的window64位的,将插件安装好,运行,会看到引入项目第一种、可以直接将script标签放入vue的head中,在项目运行时自动加载。第二种、也可以将js文件下载至本地,通过import引入,前提是将CLODOP对象export出......