vue cesium 调优

问题

Vue的数据双向绑定导致Cesium相关的对象一直被监听。

vue的data对象data会把数据里面所有的属性都转换成get,set，所以这样造成的后果就是严重影响系统运行效率
对于data选项来说，只适合存储一些需要和界面响应的数据，如果有些数据完全不需要和界面联动起来，那根本没必要把这些数据保存在data选项里面

解决办法

因为之前就没有放到vue中，所以并没有出现这个问题。
但实际随着数据的加载会有一些卡顿，具体原因不明，待后续补充
以下为一些博客的内容抽取

参考文章
1. 记一次Vue整合Cesium内存泄露的解决过程

vue项目中整合Cesium在某些页面老是崩溃和卡顿，一般Vue项目内存泄露常发生在某些地方我们引用的第三方库自己创建和维护了DOM，所以Vue在页面卸载时虽然这些对象的引用都释放了，但是因为这些对象自身关联了DOM所以内存无法释放，但是我们项目中已经在destroyed 阶段做了内存释放。

第一步：解决进入页面容易导致页面崩溃的问题

第二步：解决内存泄露问题

把DataSource提出Vue对象作用域

let gridDataSource = null
export default {
  destroyed () {
    if (this.$_viewer) {
      gridDataSource = null
      // whether to destroy the data sources in addition to removing them.
      this.$_viewer.dataSources.removeAll(true)
      this.$_viewer.destroy()
    }
    this.$_viewer = null
  }
}

2. Vue 数据劫持导致Cesium球卡慢的解决方案
3. Cesium+Vue 数据拦截引起的卡顿
4. vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法
5. cesium+vue，性能优化

总结

• 不要把任何的cesium对象放在data中监听，因为在data中的变量 ，vue会劫持数据 ，导致迟缓。
• vue组件的data选项，只存储和UI关联的数据，没关联的一定不要存储在data选项里面，提出Vue对象作用域。
• 考虑使用Vuex或者bus事件

	window.viewer = Cesium.Viewer('map',{})
	// 数据定义在外面
	let gridDataSource = null
	export default {}

vue-bus中央事件总线

非父子组件（例如兄弟组件）之间传值的方式，可以用vuex，也可以用事件总线

1、安装
npm install vue-bus --save
2、注册
在main.js中注册
import Vue from ‘vue’;
import VueBus from ‘vue-bus’;//中央事件总线
…
Vue.use(VueBus);
…
3、使用
A页面传递给B也页面：
A页面中，触发了一个叫toBPage的事件，并传递了参数’hello world!’
…
methods: {
toBPage(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 38: …lo world!'); }̲, } ... B页面中，th…bus.on监听了bPage并传入了回调函数this.getBPage，该回调函数的参数就是传递过来的数据
created: function () {
this.KaTeX parse error: Expected 'EOF', got '}' at position 33: …his.getBPage); }̲, beforeDestroy…bus.off(‘bPage’, this.getBPage);
},
methods: {
getBPage(item){
console.log(item);//item就是传递过来的数据
},
}

离开该页面时就无需再监听了，所以要销毁该监听事件，this.$bus.off就是销毁该监听事件