在使用Vue3+echarts开发可视化界面时,发现开发完之后页面特别卡顿。
看了一些资料发现原因可能在于页面多次渲染。
调试代码:
原来我是用watchEffect监听传入的options,使其做到响应式的setOption
onMounted(() => {
echartsInstance.value = echarts.init(echartsEl.value, 'light', { renderer: 'canvas' })
// 使用watchEffect监听依赖变化。
watchEffect(() => {
console.log(123) // 执行次数非常多
echartsInstance.value.setOption(props.options)
})
window.addEventListener('resize', echartsResize)
})
问题点就在于使用watchEffect监听依赖变化,会重复执行非常多次,使得页面一直在重绘,所以造成了页面卡顿。
解决方法:使用watch监听依赖。
onMounted(() => {
echartsInstance.value = markRaw(echarts.init(echartsEl.value, 'light', { renderer: 'canvas' }))
watch(props, (newProps) => {
echartsInstance.value.setOption(newProps.options)
})
window.addEventListener('resize', echartsResize)
})
最好在加上markRaw,可以使性能更好。
关于markRaw在这里的作用,可以参考这篇文章:
链接: https://blog.csdn.net/weixin_58042855/article/details/133969704?spm=1001.2014.3001.5502
使用这个API也可以解决这个错误:Cannot read properties of undefined (reading ‘type‘)【vue3+echart5报错】