vue3 [Vue warn]: Unhandled error during execution of scheduler flush

文章目录

  • 前言
  • 一、报错截图
  • 二、排除问题思路
      • 相关问题
    • Vue3 优雅解决方法
    • 异步组件
      • 异同之处:
      • 好处:
      • 在使用异步组件时,有几个注意点:
    • vue3 定义与使用异步组件
  • 总结


前言

Bug 记录。开发环境运行正常,构建后时不时触发下面问题。
先前也是这个报错的记录的文章:[Vue warn]: Unhandled error during execution of scheduler flush
之前找的临时解决方法,没想到又一次踩坑。


每次触发都会出现下面问题。vue warn 和 error。这次记录下排除方法。

一、报错截图

从图中可以大致推测出 productTableTemplate 组件里面的代码有异常。。
在这里插入图片描述

在这里插入图片描述

二、排除问题思路

  1. 稳定复现bug
    每次从特点的A页面 切换页面B后,B页面,点击出现弹窗dialog ,才会报这个错,直接从B页面进入 正常;不点击弹窗也正常。
  2. 注释法
    观察vue warn 里有 productTemplate ,这是项目里的组件。估计报错位置大概在这里。把面的template 全部注释掉后,bug不会再出现,初步锁定范围在这里。

相关问题

检测 v-for 里面绑定的数据是否初始化
在这里插入图片描述
结合上图,锁定上述范围的代码中的v-for 的时候绑定 printData[0]?.components
我的components 没有初始化,如下初始化后 解决。
在这里插入图片描述
在这里插入图片描述

Vue3 优雅解决方法

需要返回异步组件,用 包裹起来。

在这里插入图片描述

上述suspense 包裹异步组件的方式,还是出现报错。不知道哪里的原因。
在这里插入图片描述
我的大致代码
在这里插入图片描述

** !!! suspense 注意点 **
在这里插入图片描述

异步组件

异步组件与其他组件在使用上有一些异同之处,同时也具有一些独特的好处。

异同之处:

  • 异步加载:异步组件会在需要时进行加载,并且可以在加载过程中显示一个占位符。而其他组件通常是在应用程序初始化时一起加载的。
  • 动态注册:异步组件在加载完成后会自动注册并替换为真正的组件,而其他组件通常在应用程序初始化时进行静态注册。

好处:

  • 优化加载时间:异步组件的异步加载方式可以帮助优化应用程序的初始加载时间。只有在需要时才会加载异步组件的代码,而不是一次性加载所有组件的代码。
  • 按需加载:异步组件可以按需加载,只有在使用时才会进行加载,减少了不必要的资源消耗。
  • 提高用户体验:通过在异步组件加载过程中显示一个占位符,可以提高用户体验,让用户知道正在加载的状态,而不是空白或无响应的页面。
  • 模块化开发:使用异步组件可以将应用程序拆分为更小、更可维护的模块,每个模块可以独立开发和测试,有助于提高代码的可维护性和可扩展性。

在使用异步组件时,有几个注意点:

异步组件的导入函数应该返回一个 Promise 对象,该对象在加载完成后会解析为异步组件的定义。
异步组件的代码应该按需加载,避免一次性加载过多的异步组件,以免影响应用程序的性能。
异步组件的加载过程可能会引入一些额外的复杂性,例如处理加载错误或超时的情况。需要在代码中适当处理这些情况,以提供更好的用户体验。
在开发过程中,需要确保异步组件的路径和命名是正确的,以避免加载失败或找不到组件的问题。

vue3 定义与使用异步组件

在 Vue 3 中,可以使用 defineAsyncComponent 函数来定义异步组件,并在组件中使用它。

下面是一个示例,展示了如何在 Vue 3 中定义和使用异步组件:

  1. 定义异步组件:
// AsyncComponent.vue
<template><div><!-- 异步组件的内容 --></div>
</template><script>
export default {// 异步组件的逻辑代码...
};
</script>
  1. 使用异步组件:
<template><div><!-- 在使用异步组件的地方,使用异步组件的名称作为标签 --><AsyncComponent /></div>
</template><script>
import { defineAsyncComponent } from 'vue';// 定义异步组件
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));export default {components: {AsyncComponent}
};
</script>

在上面的示例中,我们首先定义了一个异步组件 AsyncComponent.vue,它可以按需加载和渲染。然后,我们使用 defineAsyncComponent 函数来定义异步组件 AsyncComponent,该函数接受一个返回异步组件导入的函数作为参数。

在组件中,我们通过 import() 函数异步导入 AsyncComponent.vue 文件。一旦异步组件加载完成,它将被自动渲染并替换为 <AsyncComponent /> 标签的内容。

在上述示例中,我们在组件的 components 选项中注册了异步组件 AsyncComponent,以便在模板中使用它。

需要注意的是,异步组件的导入函数应该返回一个 Promise 对象,该对象在加载完成后会解析为异步组件的定义。在导入函数中,你可以使用动态导入语法(dynamic import syntax)来异步加载组件,也可以使用其他异步方式来获取组件定义。

使用异步组件的好处之一是可以优化应用程序的初始加载时间,因为异步组件的代码只会在真正需要时才会被加载和执行。此外,异步组件还可以帮助按需加载和拆分应用程序,提高代码的可维护性和可扩展性。


总结

今天内容是处理一个vue warn,延申学习了同步组件渲染 与异步组件的渲染知识。

参考
https://stackoverflow.com/questions/65832037/unhandled-error-during-execution-of-scheduler-flush-this-is-likely-a-vue-intern

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

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

相关文章

hal库stm32串口接收不定长数据

参考博客&#xff1a; https://blog.csdn.net/qq_41830158/article/details/121254705 按下面步骤修改实测可用 步骤&#xff1a; 添加串口接收所需变量   打开uart.c文件&#xff0c;在文件顶部的USER CODE BEGIN 0下方添加下列变量 volatile uint8_t rx1_len 0; //接收…

C语言第十五弹---操作符(上)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 操作符 1、操作符的分类 2、二进制和进制转换 2.1、2进制转10进制 2.1.1、10进制转2进制数字 2.2、2进制转8进制和16进制 2.2.2、2进制转16进制 3. 原码、反…

C++完成使用map Update数据 二进制数据

1、在LXMysql.h和LXMysql.cpp分别定义和编写关于pin语句的代码 //获取更新数据的sql语句 where语句中用户要包含where 更新std::string GetUpdatesql(XDATA kv, std::string table, std::string where); std::string LXMysql::GetUpdatesql(XDATA kv, std::string table, std…

智能小车案例:基于Raspberry Pi的自动巡航与避障系统

项目背景 随着物联网技术的不断发展&#xff0c;智能小车成为了现代生活和工业自动化中的重要工具。为了实现智能小车的自动巡航与避障功能&#xff0c;我们采用了Raspberry Pi作为主控制器&#xff0c;结合传感器和执行器&#xff0c;构建了一个完整的系统。 所需材料 Raspber…

幻兽帕鲁:10秒开服,一键配置游戏参数教程!

随着游戏行业的不断发展&#xff0c;玩家们对于游戏体验的要求也越来越高。为了满足玩家们的需求&#xff0c;腾讯云提供了游戏联机服务器一键部署方案&#xff0c;本文将为大家详细介绍如何基于腾讯云服务器10秒钟完成开服和配置游戏参数&#xff0c;让大家的游戏体验更加顺畅…

服装产业转型升级,iPayLinks帮助企业拓展市场盈更多

从十万件的大订单转变为几百件的小订单&#xff0c;小单快反模式为中国服装出口带来了机遇&#xff0c;也带来了挑战。 “十三行-中大-鹭江”是广州曾经最具代表性的外贸服装产业带。在过去很长的一段时间里&#xff0c;服装外贸老板在这里创造“神话”&#xff1a;24小时内完…

spdk技术原理简介和实践经验

一、导读 与机械硬盘相比&#xff0c;NVMe-ssd在性能、功耗和密度上都有巨大的优势&#xff0c;并且随着固态存储介质的高速发展&#xff0c;其价格也在大幅下降&#xff0c;这些优势使得NVMe-ssd在分布式存储中使用越来越广泛。由于NVMe-ssd的性能比传统磁盘介质高出很多&…

jvm基础篇之垃圾回收[1](方法区、堆回收)

文章目录 垃圾回收类型手动垃圾回收&#xff1a;C/C的内存管理自动垃圾回收&#xff1a;Java的内存管理自动垃圾回收应用场景不同垃圾回收对比 线程不共享部分的回收方法区的回收手动触发回收 堆回收两种判断方法引用计数法查看垃圾回收日志可达性分析法GC Root对象类型可达性算…

函数式接口当参数使用

如果函数式接口作为一个方法的参数&#xff0c;就以为着要方法调用方自己实现业务逻辑&#xff0c;常见的使用场景是一个业务整体逻辑是不相上下的&#xff0c;但是在某一个步骤有不同的逻辑&#xff0c;例如数据处理有不同的策略&#xff0c;如果有大量的if-els&#xff0c;或…

机器学习4-多元线性回归

多元线性回归(Multiple Linear Regression)是线性回归的一种扩展形式&#xff0c;用于建立因变量与多个自变量之间的关系。在简单线性回归中&#xff0c;我们考虑一个因变量和一个自变量之间的线性关系&#xff0c;而多元线性回归允许我们考虑多个自变量对因变量的影响。 一般…

轻松录制视频,WPS录屏功能全攻略

“有人知道wps怎么录屏吗&#xff1f;老师要求我们录制一段视频&#xff0c;是关于课堂教学的&#xff0c;可是我不会录制文档&#xff0c;眼看就快到提交的时间了&#xff0c;现在真的很着急&#xff0c;希望大家帮帮我&#xff01;” 随着信息技术的发展&#xff0c;录制屏幕…

数字图像处理(实践篇)三十二 OpenCV-Python比较两张图片的差异

目录 一 方案 二 实践 ​通过计算两张图像像素值的均方误差(MSE)来比较两张图像。差异大的两张图片具有较大的均方差值,相反,相似的图片间则具有较小的均方差值。需要注意的是。待比较的两张图像要具有相同的高度、宽度和通道数。 一 方案 ①导入依赖库 import cv2 import…

ROR之.nil? .empty? .blank?的用法

1、出处 Ruby的方法&#xff1a;.nil?、.empty? Rails的方法&#xff1a;.blank? 2、意义&#xff1a; .nil? 判断对象是否存在&#xff1b; .empty? 对象已经存在&#xff0c;判断是否为空字段 .blank? 相当于同时满足.nil?和.empty? 注&#xff1a;Rails API中…

幻兽帕鲁专用服务器延迟高怎么解决?

幻兽帕鲁专用服务器延迟高的问题&#xff0c;可能是由于网络环境、服务器负载、数据传输等原因导致的。下面将针对这些问题&#xff0c;提供一些解决方案和建议&#xff0c;帮助您解决延迟高的问题&#xff0c;提升游戏体验。 1.检查网络环境。网络环境不稳定或者带宽较低&…

mysql navicat 定时执行sql脚本

1、查看数据库是否开启定时任务。 show variables like event_scheduler;2、没有开起的话&#xff0c;执行以下开启命令。 set global event_scheduler on;3、选择数据库&#xff0c;创建事件。 4、创建定义的执行函数或者存储过程。我自己写的是存储过程&#xff0c;如下。…

windows下postgresql的安装使用

一、安装 1、安装包安装 1.1 下载exe安装包 选择安装包&#xff1a;官网 或者点击下载&#xff1a;postgresql-12.12-1-windows-x64.exe Tip&#xff1a;此时若报错&#xff1a;There has been an error.An error occured executing the Microsoft VC runtime installer。 参…

阿里云 DMS 执行sql变更

数据库开发-数据变更-无锁变更 选择数据库&#xff1a;比如要更新生产库&#xff0c;搜索生产库名字。 填入变更sql。

V2X,启动高增长引擎

车载通讯的下一个新周期&#xff0c;毋庸置疑是V2X。从4G、5G再到C-V2X&#xff0c;是车载通讯逐步从信息娱乐、行车数据监控到万物互联的关键。 去年5月&#xff0c;全球车载通讯芯片巨头—高通公司宣布&#xff0c;与以色列车联网&#xff08;V2X&#xff09;芯片设计公司Aut…

10个关键字让你的谷歌竞价排名瞬间飙升-华媒舍

在现代社会中&#xff0c;搜索引擎已经成为获取信息的主要途径之一。在这其中&#xff0c;谷歌搜索引擎以其强大的搜索算法和智能化的用户体验而闻名。对于企业主来说&#xff0c;如何提高在谷歌搜索结果中的排名&#xff0c;对于他们的品牌推广和获取潜在客户非常重要。 1. 关…