Vue data对象中的属性对maptalks+cesium三维地图项目的性能影响（vue项目三维地图性能优化）

这个思考来自于我们的三维项目中当对三维地图的单体进行颜色等的属性修改时发现整个地图操作变得不流畅：

左侧结果列表点击某一项-》地图跳转到这一项的位置-》该项对应的三维单体高亮-》从跳转开始变得迟缓然后拖拽地图也变得卡顿

最终定位是存放单体属性的变量问题：

在把maptalks+cesium的方法（主要是单体高亮的方法，这些方法需要共同维护几个属性和对象值）在vue项目里实现时我理所当然的把一些公用属性和对象放在data里以便于在不同的方法里使用和更改这些数据——如下图注释的属性

我们来看vue官网对data的说明

也就是说在我调用方法修改单体颜色后因为data里属性的值改变导致视图重新渲染，三维部分本来就耗内存，在数据频繁更改、视图频繁渲染的情况下导致地图卡顿。

解决方法：

就是把这些属性变量提取出来直接放到<script>下面作为全局变量使用

总结：这给我们优化vue+maptalks+cesium或其他类似结构的三维项目性能优化提供了一个思路——三维地图卡顿有可能是需要的全局变量设置不当引起的

转载自：https://blog.csdn.net/liona_koukou/article/details/87939546