2.vue3封装echarts组件数据更新不同步问题2023-07-10

vue3封装echarts组件数据更新不同步问题

背景：

记录一下项目中遇到的bug，在vue3+echarts环境下，为了方便使用，我将echarts封装成组件使用，使用的时候只需要把对应的值传入给chart组件就行，但是在传入真实数据的时候遇到了问题，就是传入value值与图表组件显示的数值不一致。（如图）

原因分析：

一开始就想到是元素生成的时候，props值的改变没有跟上，于是图表就没有动态的更新上，基于这点展开排查；

原来：在组件中，defineProps接收了传入的参数本身是个代理类型的对象（Proxy），他是响应式的，但是，由于我在曲线图配置选项的option中，是通过，props.value来获取到他的部分属性，这个时候option对象就失去了响应式；

解决方法：

在组件中添加监听方法，watch（props.value,()=>{....}) 在回调方法中修改option选项的data值，就能够解决数据不同步刷新问题；

出乎意料的发现：

在排查过程中，发现，如果对于option的data属性我直接这样赋值：

data：[ props ],

数据的动态同步也能够实现！

我猜测估计是赋值的时候，如果是一个代理对象（Proxy），name他会默认选中字段中的名字为value的属性进行赋值，就类似 props.value!!

通过更改defineProps中定义的属性名字，以及设置多个同为number类型的参数，发现，在 data：[ props ] 的情况下，系统会自动将其中名字为value的值注入！！