如何解决Vue TypeScript代码中出现的maximum memory exceeds错误

问题相关代码 #

public async created() {
  if (this.item) {
    await this.loadAppointments();
  }
}

private async loadAppointments(_items?: Appointments) {
  const _item: AppointmentsDetails = await LicenseSubscriptionAPI.getInstance().getAppointments();
  // console.log(_item.app)
  this.item =_item.app;
}

报错截图 #

问题根因 #

• 大对象响应式劫持开销过高：Vue的响应式系统会递归遍历所有对象属性做数据劫持，如果你赋值给this.item的_item.app数据量极大、层级过深，甚至存在循环引用结构，会在短时间内占用大量内存，最终触发内存溢出。
• 逻辑死循环：created钩子判断this.item存在时调用loadAppointments，而loadAppointments执行后又会修改this.item的值。如果组件存在重复挂载逻辑（比如父组件动态绑定key导致组件反复销毁重建、v-if频繁切换），就会形成无限调用循环，内存持续占用直到超出阈值。

解决方案 #

优化大对象响应式逻辑 #

如果this.item不需要全量响应式更新，可通过以下方式减少内存开销：

1. 使用Object.freeze()冻结对象，跳过Vue的响应式劫持：

private async loadAppointments(_items?: Appointments) {
  const _item: AppointmentsDetails = await LicenseSubscriptionAPI.getInstance().getAppointments();
  this.item = Object.freeze(_item.app);
}

2. 只提取业务需要的字段赋值，避免全量挂载冗余数据：

private async loadAppointments(_items?: Appointments) {
  const _item: AppointmentsDetails = await LicenseSubscriptionAPI.getInstance().getAppointments();
  // 仅保留实际用到的字段
  this.item = {
    id: _item.app.id,
    name: _item.app.name,
    time: _item.app.time
  };
}

修复死循环逻辑 #

调整created钩子的触发条件，避免接口重复调用：

1. 新增加载状态标记，防止重复执行：

private isAppointmentLoaded = false
public async created() {
  if (this.item && !this.isAppointmentLoaded) {
    await this.loadAppointments();
    this.isAppointmentLoaded = true
  }
}

2. 如果初始化时this.item为空值，直接去掉判断条件，页面初始化时仅调用一次接口即可：

public async created() {
  await this.loadAppointments();
}

额外检查项 #

如果以上方案未解决问题，先打印_item.app检查接口返回结构是否存在循环引用，如有需要通知后端调整返回字段，减少不必要的嵌套结构。

内容的提问来源于stack exchange，提问作者M.Abdullah Iqbal