接口响应在50ms时，界面时而渲染时而不渲染

Blade 未结

关注

 1  114

15928191648 2026-10-10 17:16

一、该问题的重现步骤是什么？

接口响应50到60ms时界面上红框时而渲染时而不渲染

扩大接口响应到100ms，界面必然渲染

二、你期待的结果是什么？实际看到的又是什么？

三、你正在使用的是什么产品，什么版本？在什么操作系统上？

四、请提供详细的错误堆栈信息，这很重要。

五、若有更多详细信息，请在下面提供。

1条回答

admin (楼主)

2026-10-10 17:19

麻烦录制个视频重现下，然后发我们邮箱 bladejava@qq.com，我们安排人看下

作者追问:2026-10-10 17:19

已发送

回答: 2026-10-10 17:19

看了下应该是avue本身的bug，你按照这样操作下看看是否能解决

1. 创建patch.js 放到 utils 目录下

CleanShot20261011153631@2x.png

import { toRaw } from 'vue';

// 初始化期间 v-model 被外部替换、等待补同步的 avue-form 实例
const pendingForms = new WeakSet();

/**
 * 修正 avue-form 初始化期间 v-model 替换丢失的问题。
 *
 * avue-form 挂载后分两个宏任务完成初始化：先由 dataFormat 按当时的 modelValue 生成内部 form，再开启 formCreate，
 * 在此之前组件不响应 modelValue 变化。avue-crud 的 beforeOpen 先调用 done、再异步回写详情时，
 * 接口响应若落在这两步之间，回写会被忽略，弹窗停留在列表行数据。
 * 此处记录该期间的替换，待 formCreate 开启后由组件自身的 setForm 补同步。
 */
export default {
  install: app => {
    const avueForm = app.component('avue-form');
    const { dataFormat, setForm } = avueForm?.methods ?? {};
    if (!dataFormat || !setForm) {
      console.warn('未找到可修补的 avue-form，初始化同步补丁未生效');
      return;
    }
    avueForm.methods.dataFormat = function (...args) {
      // dataFormat 读取的已是最新 modelValue，此前的替换无需再补
      pendingForms.delete(this);
      return dataFormat.apply(this, args);
    };
    avueForm.mixins = [
      ...(avueForm.mixins ?? []),
      {
        watch: {
          modelValue(value) {
            // 与内部 form 为同一对象时是 dataFormat 回传引起的更新，不属于外部替换
            if (!this.formCreate && toRaw(value) !== toRaw(this.form)) {
              pendingForms.add(this);
            }
          },
          formCreate(created) {
            if (created && pendingForms.delete(this)) {
              this.setForm();
            }
          },
        },
      },
    ];
  },
};

2. 在 main.js 挂载生效，引入后，放到avue组件下面进行use挂载

CleanShot20261011153725@2x.png

CleanShot20261011153743@2x.png

作者追问:2026-10-10 17:19

解决

0 讨论(0)