本文共 867 字，大约阅读时间需要 2 分钟。
el-switch 刷新后自动触发 change？坑就藏在这里！
最近在一个 Vue3 + Element Plus 的管理后台项目中，我们遇到了一个奇怪的 bug：el-switch 控件在页面刷新后会自动触发 @change 事件，导致接口被意外调用。最初我以为是自己的代码问题，但后来发现这是 Element Plus 的官方设计！这让我不得不深入调查这个问题。
遇到的问题
在项目中，我们使用 el-switch 来控制状态，代码如下：
随着项目的使用，我们发现每次页面刷新后，el-switch 会自动触发 @change 事件。我们怀疑是不是自己的代码有问题，仔细检查后发现，这并不是代码问题，而是 Element Plus 的默认行为！
为什么会这样？
经过进一步调研，我们发现 Element Plus 的 el-switch 组件在刷新页面后会自动触发 @change 事件。这是因为 el-switch 会在每次刷新时重新渲染，并尝试触发所有绑定的事件。这种设计虽然有其便利性，但也带来了意想不到的问题。
解决方法
为了避免刷新后触发 @change 事件，我们需要做一些调整：
检查多个 el-switch 组件：确保页面中只有一个 el-switch 组件，避免多个组件同时触发 change 事件。
参考 Element Plus 文档：查阅 Element Plus 的官方文档，了解更多 el-switch 的行为和特性。
总结
el-switch 在刷新后自动触发 change 事件的现象，主要是 Element Plus 的设计特性。通过上述方法，我们可以有效避免这个问题。建议在实际项目中根据具体需求选择合适的解决方案，以确保接口的安全性和功能的稳定性。
转载地址：http://ovjfk.baihongyu.com/