其他分享
首页 > 其他分享> > uniapp&renderjs&echarts&APP

uniapp&renderjs&echarts&APP

作者:互联网

 

       在使用renderjs实现移动端数据可视化过程中遇到了奇怪的问题

 

       数据图是正常显示的,只是在初始化时会触发这两个问题。我检索了相关信息,尝试了更改echarts的版本,以及未压缩版,都是没有任何效果的,这个问题持续了好长时间,20220704晚上突然想到之前的一次报错,也是未定义,但控制台进行调试可以正常出数据,导致当时没有及时确认错误源,是因为在使用数据时,数据还没有来,但是当打印数据时,可以打印出数据。此外还有中原因是虚拟DOM还没有挂载完毕,JS就开始使用,也会报这种错误,特别是echarts这种依赖于DOM的库,更容易引起这种情况。

       我尝试将报错出的执行代码使用

       This.$nextTick(()=>{执行代码})

      

       然后就出现了突破性的进展

 

       还是两个问题,但是第二个问题产生了变化,变化就是好事儿,代表着摸到边了。

 

 

       20220705早上解决此问题。

 

我一直陷入了误区,我试图在挂载后进行动态创建script,并导入。这样是错误的,首先,JS代码在执行时,是从上到下依次执行,当执行到动态添加的script时确实是动态添加了这个节点,但是呢,并不会去回过头执行已经执行过的头部文件,导致echarts文件没有办法执行,而后会报以上的错误。我尝试使用$nextTick来缓解这种问题,其实起到的作用也是蛮大的,只不过它解决的问题不是我当时关注的重点问题,关于这个后续我会介绍。

       说回来,我之所以能解决这个问题,受到一份博客下的评论的启发,本来我只是想到似乎在哪里看到this指针不能用在逻辑层,然后为了确认这个问题就去查资料,但好巧不巧,看到这份评论。

 

链接:http://t.csdn.cn/G1Vyh

 

我目前写的便是APP端,只不过现在运行在H5,所以能正常显示,导致我没注意这一点潜在的问题,同时也恰好使用了JS原生方法去获取节点,创造节点,我寻思着,这可是隐藏的炸雷,必须要避免。

       然后我就尝试换了种导入echarts的方法,先是在index.html中引入,虽然能显示数据,但是之前的两个问题还是存在,我就换成了用npm引入包文件,

 

据我现在猜测,或许只要不在页面构建后再添加echarts就行。

       是的没错,更改过之后就已经不报问题了。

 

 

此问题已解决,接下来使$nextTic的问题,我在写记录时,想到,若是我将$echarts注释掉会不会有问题,会有什么问题?

我在尝试后发现,在mounted钩子函数中,并不适用于对需要DOM的库的绑定,使用上图的导入方法,并配合$nextTick没有毛病,但是如果没有$nextTick那会导致找不到DOM,折让我挺疑惑的,mounted不就是DOM稳定后才进行的生命周期函数么?为什么在这里却获取不到?

 

 

这是注释掉$nextTick的报错。

 

 

就简单的猜测一下,我使用的第一种方式虽然会出现读取不到的问题,但它第二次更改数据就是没有问题的,不会报任何错,只有在初次挂载的时候,会出现找不到echarts的情况。

       这是不是代表着,我更新了head,然后虚拟DOM在检测时发现了,就更新了这点。可是Vue的范围不是在Body中么?好奇怪。

       还是说我在更新图标数据时,会刷新整个html页面?导致echarts被找到。蛮迷惑的。

 

如果有什么我表述的不清晰,请联系otherchannel@163.com

标签:nextTick,uniapp,renderjs,DOM,APP,问题,执行,数据,echarts
来源: https://www.cnblogs.com/OtherChannel/p/16445125.html