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（）方法中进行赋值。
最终解决，回调函数执行一次！
此处改变对象其余属性
经验总结：
