Vue父组件mounted执行完后再执行子组件mounted

// 创建地图实例

this.map = new BMap.Map(‘map’)

}

}

...

现在这样可能会报错,因为父组件中的 map 还没创建成功。必须确保父组件的 map 创建完成,才能使用 this.$parent.map 的方法。

那么,现在的问题是:如何保证父组件 mounted 结束后再进行子组件 mounted

深入分析

===================================================================

你需要了解父子组件生命周期的执行顺序

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


父组件先进行创建,在挂载(mounted)前,子组件进行创建+挂载,子组件挂载完成后父组件挂载。

整个顺序就是:

父组件:beforeCreate

父组件:created

父组件:beforeMount

子组件:beforeCreate

子组件:createc

子组件:beforeMount

子组件:mounted

父组件:mounted

可以看出是先子组件 mounted 之后父组件 mounted,那么,如何实现父组件 mounted 完毕后再子组件 mounted 呢?

解决办法

===================================================================

【思路】 通过打印 this 发现,有一个 _isMounted 属性,表示当前是否挂载完毕(true:挂载完毕,false:没有挂载完成),在父组件挂载前将 _isMounted 存在 window 中,挂载后更新 _isMounted。在子组件 mounted 中添加定时器,根据 _isMounted 判断是否执行初始化方法。

// 父组件

beforeMount() {

window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为false

},

mounted() {

await GaodeMap().then(() => {

// …

})

window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为true

}

// 子组件

mounted() {

let pMountedTimer = window.setInterval(() => {

if (window.parentMounted ) {

window.clearInterval(pMountedTimer)

// 下面就可以写子组件想在mounted时执行代码(此时父组件的mounted已经执行完毕)

this.initData()

}

}, 500)

}

[拓展]生命周期执行顺序

=============================================================================

  • 子组件更新过程
  • 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用?
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用?
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?

有哪些钩子函数?
13.route 和 router 的区别是什么?
14.说一下 Vue 和 React 的认识,做一个简单的对比
15.Vue 的 nextTick 的原理是什么?
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解?
19.vue-cli 替我们做了哪些工作?
[外链图片转存中…(img-7FzOY0XX-1719230711332)]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

端到端的全人体关键点检测:手把手实现从YOLOPose到YOLOWhole

目录 一、搭建yolopose平台二、迁移训练任务2.1 任务拓展数据准备训练模型测试训练模型结论To-do list: 1、数据集,COCO-whole, Halpe;下载好; 2、模型搭建,先基于yolov8来检测人体姿态,17个点; 3、迁移任务,17个点,把它拓展到133个点; 4、优化133个点的模型; 一、搭…

深入理解RLHF技术

在《LLM对齐“3H原则”》这篇文章中,我们介绍了LLM与人类对齐的“3H”原则,但是这些对齐标准主要是基于人类认知进行设计的,具有一定的主观性。因此,直接通过优化目标来建模这些对齐标准较为困难。本文将介绍基于人类反馈的强化学…

ONLYOFFICE 8.1:全面升级,PDF编辑与本地化加强版

目录 📘 前言 📟 一、什么是 ONLYOFFICE 桌面编辑器? 📟 二、ONLYOFFICE 8.1版本新增了那些特别的实用模块? 2.1. 轻松编辑器 PDF 文件 2.2. 用幻灯片版式快速修改幻灯片 2.3. 无缝切换文档编辑、审阅和查…

RS-485和RS-422通信的3.3V低功耗收发器MAX3483

描述 国产MAX3485外观和丝印 该MAX3483ESA为15kV ESD保护、3.3V、低功耗收发器,用于RS-485和RS-422通信。 每个设备包含一个驱动器和一个接收器。 该MAX3483ESA具有压摆率限制驱动器,可最大限度地降低 EMI 并减少因端接不当电缆引起的反射,从…

system verilog 学习1

1 数据类型 sv 引进了一些新的数据类型,它们具有以下优点 (1)双状态数据类型:更好的性能,更低的内存消耗 (2)队列、动态和关联数组:减少内存消耗,自带搜索和分类功能 &a…

C# 使用Vector256写了一个简单的帮助类Vector256Helper

当数据量大的时候用普通代码计算非常耗时&#xff0c;这里简单利用simd加速处理 internal unsafe class Vector256Helper{/// <summary>/// 统计元素个数/// </summary>/// <param name"array"></param>/// <param name"elementToCo…

板凳--------57.Linux/Unix 系统编程手册(下) -- SOCKET : Unix domain

https://blog.51cto.com/u_15567199/5204540 【linux网络编程】容错处理文件 wrap.h、wrap.c_wx623c6c9. // 容错处理 wrap.h #ifndef _WRAP_H_ #define _WRAP_H_#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <error.h> #i…

【BSCP系列第2期】XSS攻击的深度剖析和利用(文末送书)

文章目录 前言一、官方地址二、开始&#xff08;15个&#xff09;1&#xff1a;Lab: DOM XSS in document.write sink using source location.search inside a select element2&#xff1a;Lab: DOM XSS in AngularJS expression with angle brackets and double quotes HTML-e…

北邮《计算机网络》MAC子层笔记

文章目录 缩写复习MAC层所在层次动态分配信道算法们的简要介绍信道的五条基本假设多路访问的协议&#xff08;理论上的协议&#xff09;aloha协议CSMA协议其他冲突避免协议无线局域网协议 &#xff0c;MACA 以太网协议802.3&#xff08;实际协议&#xff0c;刚刚是理论&#xf…

小白学python(第一天)

在有了C语言的基础后&#xff0c;我们学python会变得相当容易&#xff0c;毕竟c生万物&#xff0c;废话不多说&#xff0c;直接进入我们的正题 课前准备 Python环境的搭建以及Pycharm的安装 python环境安装 Download Python | Python.org 因为我的电脑是windows&#xff0c;…

C++精解【6】

文章目录 eigenMatrix基础例编译时固定尺寸运行指定大小 OpenCV概述 eigen Matrix 基础 所有矩阵和向量都是Matrix模板类的对象。向量也是矩阵&#xff0c;单行或单列。Matrix模板类6个参数&#xff0c;常用就3个参数&#xff0c;其它3个参数有默认值。 Matrix<typename…

使用鸿蒙HarmonyOs NEXT 开发 快速开发 简单的购物车页面

目录 资源准备&#xff1a;需要准备三张照片&#xff1a;商品图、向下图标、金钱图标 1.显示效果&#xff1a; 2.源码&#xff1a; 资源准备&#xff1a;需要准备三张照片&#xff1a;商品图、向下图标、金钱图标 1.显示效果&#xff1a; 定义了一个购物车页面的布局&#x…

6. Revit API UI: PreviewControl(预览控件)

6. Revit API UI: PreviewControl&#xff08;预览&#xff09; PreviewControl 有时我们需要一个预览功能&#xff0c;而Revit也提供了一个PreviewControl类来帮助我们实现这个功能。 从类的继承关系来看&#xff0c;PreviewControl就是一个用户自定义控件&#xff0c;它就…

accelerate 笔记:进程管理

在使用分布式训练系统时&#xff0c;管理各个进程在 GPU 上的执行时间和顺序非常重要。一些进程会比其他进程更快完成&#xff0c;有些进程在其他进程未完成之前不应该开始执行 1 每台机器进行一次 accelerator.on_local_main_process def do_my_thing():do_thing_once_per_s…

外贸行业 - 收汇日期

“收汇日期”指的是外贸业务中&#xff0c;出口方从进口方收到货款的具体日期。在外贸交易中&#xff0c;特别是使用信用证&#xff08;Letter of Credit, L/C&#xff09;、电汇&#xff08;Telegraphic Transfer, T/T&#xff09;、付款交单&#xff08;Documents against Pa…

HTML【重点标签】

一、列表标签 1.无序列表 父级别&#xff1a; 无序列表的标题 ----表示无序列表的整体&#xff0c;用于包裹li标签 子级别&#xff1a; 无序列表一行的内容 ----表示无序列表的每一项&#xff0c;用于包含一行的内容 语义&#xff1a;构建没有顺序的列表 特点&#xff1a;列…

Linux 中经常见到的 gz 文件

在linux的使用中&#xff0c;.gz格式的压缩文件非常常见&#xff0c;下面整理一下关于.gz格式的压缩和解压缩。 解压缩gz文件 通过gzip解压缩 gzip -d myfile.gz执行该命令后&#xff0c;文件被解压到当前目录&#xff0c;原gz文件被删除。 如果你不想删除源文件&#xff0c…

基于 RGB的热成像无人机树冠数据集(目标检测)

亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 摘要&a…

基于PaddleDetection的电路板瑕疵检测

文章目录 1. 数据集与框架介绍2. 任务详情3. Cascade R-CNN简介4. 数据分析各类别样本的数量真实框的宽高比真实框在原图的大小比例 5. 相关配置数据增强数据集路径和评估指标学习率和优化器配置预训练CascadeRCNN 的配置日志记录 6. 训练预测7. 参考链接 1. 数据集与框架介绍 …