Vue 3 watch 触发两次导致接口调用两次 - 解决数据错乱问题

在 Vue 3 中，watch 选项会在侦听的数据发生变化时立即被调用。如果 watch 选项中的数据发生了两次变化，那么 watch 函数也会被调用两次。\n\n如果你的接口调用是在 watch 函数中进行的，那么可能会导致接口调用两次的问题。为了解决这个问题，你可以使用 Vue 3 中的防抖函数来延迟接口调用。防抖函数可以确保只在一定时间内最后一次触发时才进行接口调用。\n\n你可以使用 lodash 库中的 debounce 函数来实现防抖功能，或者自己实现一个简单的防抖函数。下面是一个使用 lodash 库中的 debounce 函数实现防抖的示例：\n\njavascript\nimport { debounce } from 'lodash';\n\nexport default {\n data() {\n return {\n // 定义需要侦听的数据\n dataToWatch: null,\n };\n },\n watch: {\n // 侦听 dataToWatch\n dataToWatch: debounce(function(newValue) {\n // 在这里进行接口调用\n this.apiCall(newValue);\n }, 500),\n },\n methods: {\n apiCall(newValue) {\n // 进行接口调用\n // ...\n },\n },\n};\n\n\n在上面的示例中，使用了 lodash 库中的 debounce 函数来创建了一个防抖函数。该防抖函数会在 dataToWatch 变化后的 500 毫秒内，如果没有再次变化，才会执行接口调用。\n\n这样就确保了即使 watch 函数被触发多次，接口调用也只会执行一次。