fix(Button):the wave animation bug of loading state switching🌊

[24min]

Antd Vue Version

4.0.1

BUG描述

修复按钮loading状态切换的动画bug。当按钮多次切换到loading状态之后，点击按钮，会发现按钮的波浪动画颜色很深（其实是建立了多个wave的动画元素）

复现链接

https://codesandbox.io/s/antd-vue-4-0-button-wave-bug-cftvrz?file=/src/demo.vue

复现步骤

<script setup>
import {ref} from "vue"
const isLoading = ref(false);
const clickBtn = ()=>{
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
  }, 3000);
}    
</script>

<template>
  <a-space>
      <a-button :loading="isLoading">Antd Vue1</a-button>
      <a-button>Antd Vue2</a-button>
      <a-button :disabled="isLoading" @click="clickBtn">click!click!</a-button>
    </a-space>
</template>

1. 打开复现链接或者采用上面的代码（下面将会以上面的代码作为描述的前提）
2. 在打开的链接页面，点击最后一个按钮click!click!，等待模拟异步请求完成，loading状态切换为false。
3. 重复2步骤多次
4. 点击第一个按钮Antd Vue1,会发现波浪动画的颜色很深，而第二个按钮不会。

代码改动说明

改动的代码文件是ant-design-vue\components\_util\wave\index.tsx

增加了(!newV && oldV)的判断条件。

原本出现这个bug是因为当loading状态切换为true的时候（props.disabled也为true），会触发watch，由于在nextTick中判断了props.disabled，所以不会新建wave动画元素，但是当异步请求结束，loading状态变为false，此时也会触发watch，但是在nextTick中没有拦截这种情况，就导致了会新建一个wave动画元素。多次反复之后就会新建多个wave动画元素。

所以我判断了如果loading状态从true变为false的时候，不会新建wave动画元素。

其它问题

从正常状态切换loading状态的时候，在loading状态时点击还存在wave动画，这是否符合最初的设计？

因为我看到官网上的例子，如果一开始就是loading状态，点击的时候不会有wave动画。

在此PR中没有涉及这个问题的更改。

[tangjinzhou]

应该是 loading 的时候就不能触发wave

[24min]

应该是 loading 的时候就不能触发wave

但是这个bug是因为频繁切换loading状态（loading从true变为false的时候），导致多建了wave动画元素。
在button的代码中也看到了在 loading状态中 禁止使用wave动画。
所以这个不应该在wave的源码中拦截这种情况吗？

所以唐老师，这个应该怎么改？或者说我这种改法还有什么需要改进吗？

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.