vue3+el-select的watch监听回调触发多次问题

vue3+el-select的watch监听回调触发多次问题

背景：

​ 当时的需求实：通过选择下拉框，改变当前充电桩对象，监听对象变化是刷新表格（echarts）的数据；

​ 结果问题出现：当我选择下拉框中的函数时，watch（）中的刷新表格执行了两次。

• 第一次回调，对象的id变化；
• 第二次回调，对象的name和type属性变化（该变化赋值于另一方法中实现）；

原因：

​ 通过仔细排查发现，原来是因为：

• 在elementplus组件的el-select的@change函数调用时，会对v-model的值进行赋值，导致第一次改变了对象的id，从而引发回调函数；
• 在@change=“handler（）”的handler方法中，我又对对象的其余属性进行赋值，从而第二次触发了回调函数。

最终导致，两次执行回调的时候，对象的type字段不一致（尚未更新，更新在handler（）中才完成），于是刷新了两次图标，导致正确的图表被覆盖的问题；

问题解决方法：

​ 意识到是对象的属性变化没有保持原子性的问题，在两个地方重复变化。于是我将el-select的v-model抽离出来，单独定义一个变量来接收当前选择的id编号，并将该编号的值初始化为当前充电桩的id。

​ 而充电桩对象的各个属性变化，统一在handler（）方法中进行赋值。

最终解决，回调函数执行一次！

此处改变对象其余属性

经验总结：