解决Element-Plus中el-switch的change方法自动触发问题

在Element-Plus中，如果你遇到el-switch的change事件自动触发的问题，可能是因为组件的状态没有正确更新导致的。这里提供一个简单的解决方案，确保在更改开关状态时change事件只会在状态真正改变时触发。

<template>
  <el-switch
    v-model="switchValue"
    @change="handleSwitchChange"
  >
  </el-switch>
</template>
 
<script>
import { ref, watch } from 'vue';
 
export default {
  setup() {
    const switchValue = ref(false);
 
    // 使用watch来监听switchValue的变化，而不是直接在change事件中处理逻辑
    watch(switchValue, (newValue, oldValue) => {
      if (newValue !== oldValue) {
        handleSwitchChange(newValue);
      }
    });
 
    // 事件处理函数
    function handleSwitchChange(value) {
      console.log('Switch value changed to:', value);
      // 这里执行其他逻辑
    }
 
    return {
      switchValue,
      handleSwitchChange
    };
  }
};
</script>

在这个例子中，我们使用了Vue.js的ref来定义响应式的开关状态变量switchValue，并使用watch来监听这个变量的变化。这样，当开关的状态发生改变时，handleSwitchChange函数只会在switchValue实际变更时被调用，从而避免了自动触发的问题。