Vue学习——trading-vue.js中的内存泄露问题及导致浏览器的崩溃问题

量化橙同学

于 2022-07-25 18:05:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：量化投资工具介绍文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_37876745/article/details/125980242

工具介绍同时被 2 个专栏收录

105 篇文章

订阅专栏

量化投资

100 篇文章

订阅专栏

trading-vue.js在长时间运行后可能导致浏览器内存占用过高并引发崩溃。通过在项目中采用特定的代码调整，即使用`this.$refs.tradingVue.goto(this.dc.data.chart.data[this.dc.data.chart.data.length-1][0])`替代`resetChart()`函数，可以有效避免内存泄漏。这个解决方案源于GitHub上的讨论和示例项目。请注意在实际应用中，需将`this.$refs.tradingVue`和`this.dc`替换为对应的实际引用名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

trading-vue.js是一个仿tradingview的前端框架，在金融数据的可视化场景中会可以被用到，项目路径在此。但是在trading-vue中有一个问题，就是它在连续几个小时的展示页面后，会出现浏览器的内存占用过大以及浏览器的崩溃问题

chrome的内存占用情况

针对这个问题，在trading-vue.js的讨论区有人给出了解决方案
https://github.com/tvjsx/trading-vue-js/issues/139
请添加图片描述

链接如下所示，https://github.com/vadymkop/TradingVueMemoryLeak
其实他是给了一个解决方案的项目，在项目中的核心代码如下所示：

请添加图片描述

 // 1 case - without memory leak
// this.$refs.tradingVue.goto(this.dc.data.chart.data[this.dc.data.chart.data.length - 1][0])
// 2 case - with memory leak
this.$refs.tradingVue.resetChart()

大概意思就是使用一种移位的操作来取代原来的resetChart()，然后就可以避免这个内存泄露的问题，所以我们使用的时候用这里的这一行代码

this.$refs.tradingVue.goto(this.dc.data.chart.data[this.dc.data.chart.data.length - 1][0])

来代替resetChart函数就可以，没有必要直接运行这个项目，这里在说一下，在一些tradingvue的写法里，使用的是

this.$refs.tvjs

而不是

this.$refs.tradingVue

然后上图中代码里的，

this.dc

也要替换为我们自己项目中的图像容器名称，比如说是datacube或者whatever