vue3 用el-switch 销毁和创建setinterval

在 Vue 3 中，如果你想要使用 `el-switch` 组件来控制 `setInterval` 的开启和关闭，你可以通过绑定一个变量到 `el-switch` 的 `v-model` 上，然后在 `el-switch` 的变更事件中控制 `setInterval` 的创建和销毁。以下是一个简单的示例：

<template>
  <el-switch v-model="switchVal" @change="handleChange"></el-switch>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个响应式的 ref 引用
    const switchVal = ref(false);

    // 定义 handleChange 函数，用于控制 setInterval 的创建和销毁
    const handleChange = (val) => {
      if (val) {
        // 当 el-switch 开启时，创建 setInterval
        window.myInterval = setInterval(() => {
          // 这里可以执行你想要周期性执行的代码
        }, 1000);
      } else {
        // 当 el-switch 关闭时，销毁 setInterval
        clearInterval(window.myInterval);
      }
    };

    // 返回需要在模板中使用的变量或方法
    return {
      switchVal,
      handleChange
    };
  }
};
</script>

在这个示例中，`el-switch` 组件的 `v-model` 绑定了一个名为 `switchVal` 的响应式变量。当开关被切换时，`handleChange` 方法会被触发，如果开关是开启的，它会创建一个 `setInterval`，否则会销毁这个 `setInterval`。