标签：nextTick uniapp renderjs DOM APP 问题 执行 数据 echarts

 

       在使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。