浅谈vue中echarts实例的保存位置

echarts是一个强大的第三方图表库，我们在很多可视化的项目中都回用到，但是echarts初始化后的实例该如何保存，你是否有认真的思考过？

背景

在之前开发过的一个vue项目中，使用了echarts进行拓扑图的绘制，并在节点之间通过lines系列添加了线路流动的效果，但是在项目运行一段时间后，拓扑中的动画效果会出现卡顿，掉帧的效果，线路流动效果的颗粒感严重，十分影响观感。

思考

通过检查代码，发现都符合规范，在mounted的生命周期中初始化实例并接收，在beforeDestroy中正确的销毁了实例，一切看起来都十分合理。但是，echarts的实例真的有必要变成响应式的对象么？

export default {
	data () {
		chart: null
	}
	mounted () {
		this.chart = echarts.init(this.$ref.chart)
	}
	beforeDestroy () {
		this.chart.dispose()
	}
}

解决

我们只需要在js代码的最上面 声明一个全局变量去接收这个echarts实例即可

<script>
let chart = null
export default {
	data () {
		chart: null
	}
	mounted () {
		// this.chart = echarts.init(this.$ref.chart)
		chart = echarts.init(this.$ref.chart)
	}
	beforeDestroy () {
		// this.chart.dispose()
		chart.dispose()
	}
}
</script>

总结

放在data内的所有内容都会被vue转换为响应式数据，也就是说这个数据上的每一个字段的变化都可以被监听到，对于界面渲染来说，这很关键，但是对于echarts实例来说，就没有那么大的用处了，甚至会影响到程序的性能。其实不仅仅是echarts实例，其他一些第三方库，例如swiper，创造的实例也都可以直接保存在组件的全局变量中。如果一个简单的全局变量就可以实现你需要的功能，那么就没有必要将实例存放在响应式数据中了。