MapBox在vue环境中添加图层样式错乱，修改样式无效的问题

如果你尝试将mapbox-gl引入vue环境，制作组件或者组件库，你会遇到这样的一个问题，就是你将mapbox-gl实例化以后的对象如果绑定到Vue的data选项里（将其设置为响应式对象）就会产生出一个很严重的bug，就是你调用addLayer接口的时候加载的图层样式发生错乱。

正常情况下你可能写出了如下的错误代码：

data(){

 return{
  map:null

  }

},

mounted(){

  this.map=new mapboxgl,Map({
  zoom:10,
  center:[100.52454,35.25451]
  
})
//处理别的业务逻辑...
this.map.addLayer({
 id:'id',
 source:{
  type:'geojson',
  data:data 
 },
 paint:{
  fill:'#5fe5ee',
 
 }
 })

}

然而你发现你写完addLayer方法之后，图层是加载到地图上了，但是它的样式不对。并且无论你如何改颜色，他都是保持一种样式不变。并且我发现每个人遇到的样式错乱还不一样，具体原因也不清楚，但是最核心的问题还是在于将这个实例对象map设置成了响应式的数据。

一旦修改之后，这个问题就不存在了，解决办法：在组件内声明一个全局变量来实例化mapboxgl，之所以全局是因为方便之后其他方法体内部引用这个对象，也方便监听</