关于vue.js:一行代码解决vue数据量大卡顿问题

最近遇到一个需要，须要在地图上显示某地区的路网线路，后果后端间接返回了3w多条数据

每条线路下坐标点靠近100个

这四舍五入就是300w的数据啊。

而且还不能分层级显示，只能一次性显示全副打点，没方法，硬着头皮放到地图上吧。

开发实现，关上网页，拖动地图，偶然呈现了卡顿的状况，然而，上线吧，能用就行

3天后

产品经理：诶，这数据怎么不会变啊，你加个轮询定时申请吧，还有地图能不能有点动态效果，隔一段时间随机定位到某个地点吧，而后地图打点点击要有具体数据的弹窗
打工人：...

加上轮询，关上网页，拖动地图，呈现了显著的掉帧和卡顿的状况，然而，上线吧，能用就行

一天后

产品经理：页面没怎么操作，怎么放着放着就崩了
打工人：...

关上控制台，关上工作管理器，发现首次加载页面内存就占用了靠近1G

第一次轮询，内存占用1.4G

第二次轮询，内存占用1.8G

每次轮询，内存占用就增大了400M，好家伙，这样上来1T的内存都不够用啊（况且一个tab内存占用到4G左右页面就解体了

这...不对啊，我明明地图对象都移除了，数据也是重置了啊，内存怎么始终在增大呢？

于是开始了修bug之路

通过重复调试和定位，发现是vue数据深度监听和地图对象存在援用关系导致内存无奈开释（狐疑）
那这个问题好解决啊，禁用vue深度监听不就好了吗

因为本我的项目中申请的数据只用于展现，不会对数据作批改，所以只须要在赋值data前把数据解冻即可

this.list = Object.freeze(list)

因为数据被解冻，所以vue无奈深度遍历数据给数据增加get和set属性，这样就缩小了数据监听带来的问题，而且在大数据量的状况下Object.freeze()十分有用

Object.freeze()办法能够解冻一个对象，一个被解冻的对象再也不能被批改，当然你能够将变量的援用替换掉