Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

覆盖物绑定响应式数据,造成内存泄漏。 #32

Open
Frank2-Liu opened this issue Mar 22, 2023 · 7 comments
Open

覆盖物绑定响应式数据,造成内存泄漏。 #32

Frank2-Liu opened this issue Mar 22, 2023 · 7 comments

Comments

@Frank2-Liu
Copy link

使用版本

使用版本:2.0.4

涉及组件

ElAmap, ElAmapControlScale, ElAmapPolyline, ElAmapMarkerCluster, ElAmapInfoWindow,

问题描述

覆盖物绑定响应式数据,递归超过vue3的最大限制,造成内存泄漏,页面白屏卡死。

报错信息

[Vue warn]: Maximum recursive updates exceeded. 
This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. 
Possible sources include component template, render function, updated hook or watcher source function.

尝试解决

  • 使用computed —— 无果,效果一致
  • 使用字面量 —— 不卡死,但失去响应式
@yangyanggu
Copy link
Owner

数据结构有问题吧

@Frank2-Liu
Copy link
Author

数据结构有问题吧

定义了一个markers的ref空数组,请求回来之后直接替换。数组内部的每个对象包含经纬度组、下标、附带一个data对象(包含一些item数据)。
而且最蛋疼的问题是,在本地调试都ok,部署在线上环境后直接卡死。

@yangyanggu
Copy link
Owner

正常应该不会这样,你贴一下矢量图形使用的代码,还有数据的结构

@Frank2-Liu
Copy link
Author

正常应该不会这样,你贴一下矢量图形使用的代码,还有数据的结构

使用组件

code

数据结构

code1

@yangyanggu
Copy link
Owner

从数据来看没什么问题,尝试着换一下vue版本看看

@Frank2-Liu
Copy link
Author

从数据来看没什么问题,尝试着换一下vue版本看看

好的,下周试一下。目前是将渲染的点全部去除响应式了。

不过有一点很奇怪。

使用 build:prod 的时候,涉及到响应式数据就会卡死。

而使用 build:test 的时候,虽然依旧会有报错,但却可以运行而不至于卡死。

初步推测是由于drop_debugger属性的原因,但将其属性修改为false之后依旧会卡死。之前又看到文章说打包后有报错会阻塞进程,也有怀疑过地图异步加载的问题,不过我也做了一些应对。目前卡在这里了,看后续能不能找破解之法。

@yangyanggu
Copy link
Owner

2.0.21版本的组件在给地图实例传递数据时做了去proxy和ref的处理,你可以试下最新的版本

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants