• vue3热更新后导致组件执行两次的bug


    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 firewrk 2024-04-17 15:52 采纳率: 0% 浏览 2 首页/ 前端 / vue3热更新后导致组件执行两次的bug vue.js前端javascript 今天被vite热更新折磨了。写了个无限列表滚动的组件。发现热更新后整个组件会加载两次,导致其中的定时器、requestAnimation也执行了两次。 起初我还以为是没有销毁成功,因为他们都报错没有获取到offsetHeight。最后发现是整个组件被执行了两次,其中一次获取不到这个。 我不知道为什么会这样 组件开头console: 热更新后: 组件调用: 但是当我注释掉一段代码后,发现他就不执行两次了 这段代码会在下面的stepFill中调用 有没有兄弟知道这是为啥。 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500) ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    3条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-17 15:52
      关注

      引自免费微信小程序:皆我百晓生

      在 Vue 3 中遇到组件初始化时执行两次的情况,可能是因为某些条件触发了组件的重新渲染。针对您的代码片段,我会逐步分析并提供可能的解决方案。

      首先,让我们检查一下代码中的关键部分,特别是可能导致重复渲染的部分。

      1. 在这个示例中,组件中注册了两个周期性操作:一个是常规的定时器 setInterval,另一个是 requestAnimationFrame。在组件销毁时,通过 clearIntervalcancelAnimationFrame 手动清除这些操作,确保它们不会受到 Vite 热更新的影响。

      展开全部

    评论
编辑
预览

报告相同问题?

  • 相关阅读:
    ArcGIS模型构建器ModelBuilder的使用方法
    IntelliJ IDEA 插件推荐
    【力扣题解】石子游戏
    PTA题目 阶梯电价
    15 | Linux系统上安装python
    【ACWing 算法基础】字符串哈希
    操作系统 - 进程
    RibbitMQ学习笔记之交换机实战
    59 分割等和子集
    MyBatis之动态SQL&&分页
  • 原文地址:https://ask.csdn.net/questions/8090042