three.js项目从vue2升级成vue3、vue-router3升级成vue-router4后续遇到的问题

关于vue2.x到vue3.x

关于把对象声明在data()还是mounted()

按照网上的说法，非数字的放在mounted()，数字的放在data()，比如container,camera,mesh,orbitControl,gridHelper,socket,datGui,fbx,gltf那这些的就声明到mounted()里了，全部都是this.XXX=null;,这样的好处也有一个就是最后在beforeUnmount()里可以直接把这一些复制进去，当然还需要关闭socket、清除监听事件、cancelAnimationFrame等等；

今天在给项目加东西时，偶然间测试到了一个很久没有测试的东西，场景中的一个模型，通过websocket持续发送数据，模型根据数据不断地更新位置，同时收到的位置坐标记录到一个数组中，这个数组中的一个个数据每三个为一组赋值给一个LineGeometry，geometry.setPositions(this.curvePoints3)，用来画fatLine，就是把这个模型的运动轨迹画出来，之前遇到的问题是websocket持续发送的数据很多，一秒100次，很快这个curvePoints3[]就很大了，画运动轨迹的逻辑是，每收到一个新的ws发来的位置数据，就把之前场景中的轨迹移除，然后根据这个新curvePoints3[]（比上一个多了三个数字）重新画fatLine，这样数组很大的画，每一个ws就要移除并且重新生成一个轨迹，很快性能就跟不上了，很卡，解决方案是控制一个最大值，当数组的长度超过这个最大值，就用新来的位置替换最早的，也就是轨迹也动了起来，比如最大让数组保存600个数字，也就是200个xyz，这样最大也就一个ws移除并且重新生成一个200个点的fatLine，当时解决了这个问题；

升级vue3后，一直没有用过这个功能，今天一试，前面200个点好好的，当超过200个点之后，也就意味要要开始对数组进行删除之后，帧数骤降，60FPS直接降到7FPS，这绝对有问题呀，下面是超过200个点之后比原来需要多执行的几行代码，就这几行，真不至于60一下子降到7帧吧？（MAX_CURVEPOINTS==600）

//为保证性能，顶点数组一次性最多MAX_CURVEPOINTS个点
      if (this.curvePoints3.length >= this.MAX_CURVEPOINTS) {
        this.curvePoints3.shift() //删前三个元素 Float
        this.curvePoints3.shift() //删前三个元素 Float
        this.curvePoints3.shift() //删前三个元素 Float
      }

用谷歌开发者工具的performance检查了一下，发现多了很多东西

上图是前200个点，可以看到调用的方法很少，一张图就看到头了，然而当200个点之后：




上面三张图是渲染一帧的，没有重复截的地方，有很多很多很多的get,set，然后看下图，这些get,set都在reactivity.esm-bundler，直觉这是vue3给对象加的响应式方法啥的？因为对数组进行了shift操作，可能获取流程多了很多方法需要做?

想到这儿我下意识就去把数组的位置换了，原来是在data()里，我是觉得它里面寸的都是数字😂，放到mounted()里，this.curvePoints3=[];重新启动，回到了之前的情况，稳定60FPS，醉了，vue3这个根本不懂呀，加油吧

关于vue-router3.x到4.x

路由History模式、部署到tomcat刷新报404

一直都没有测试部署到tomcat去访问，今天部署后发现，进入x.x.x.x:8080/dist会自动跳转到/dist/login，登陆成功进入x.x.x.x:8080/dist/home，然后点击功能菜单进入home路由的子路由，然后会进入比如x.x.x.x:8080/dist/home/users之类的URL，第一次进这些地址是可以的，但是如果进去之后刷新页面，就会报404，

• 参考资料：
  • vue router 4.x 官方提醒
  • CSDN博客适用tomcat
  • CSDN博客适用其他情况

最终通过在打包出来的dist中添加WEB-INF文件夹以及其中的web.xml文件解决，通过实验验证确实是这个文件起关键作用

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
 id="scplatform" version="2.5">
 <display-name>/</display-name><!--/webName/-->
 <error-page>
 <error-code>404</error-code>
 <location>/index.html</location>
 </error-page>
</web-app>