AntDesign tooltip组件异步显示错位问题

tooltip是前端交互常用的一个组件，很多时候可能tooltip中显示的content并非是常量，而是需要我们通过接口请求获取content，但是在AntDesign中，tooltip的content如果是异步赋值的话，经常会出现位置错乱的问题，要解决这个问题，首先要对其出现的场景以及原因做出分析
场景
AntDesign中的tooltip显示或隐藏有两种控制方法，一种是自动触发，即根据属性trigger的配置（hover/focus/click/contextmenu）以及默认visible触发；另一种是手动控制组件的visible属性，直接控制其显隐

出现的原因分析
以自动触发为例，我们在其渲染之前打断点，就可以看到，若为异步请求，从触发visibleChange，到tooltip渲染在页面上，其大小和位置进行了多次计算，第一次的计算结果是正确的，后面的多次计算可能会引起位置偏差；而如果是本地的变量直接渲染，那么则直接渲染出来的位置就是正确的，由此现象我们可以推导出两种解决方法

1. 率先把tooltip渲染到页面上，然后再去请求数据赋值
   异步请求会引起tooltip对位置的多次计算，那么如果我们把空字符串或提示性语句作为常量先渲染出来，常量渲染的位置是不会出错的，且渲染完成后位置将固定，然后再去进行异步请求再赋值，这样就能解决该问题，具体可如下
   用v-model绑定visible，这样就是自动触发，此时我们监听visible

watch: {
	visible: {
		immediate: true,
		handler: function (val) {
			setTimeout(() => {
				Promise.then((res) => {
					// 赋值
				})
			}， 80)
		}
	}
}

这个方法有个缺陷setTimeout的时间间隔其实是一个预估值，即渲染到页面的大概时间，有可能会出现误差（一般不会）

2. 手动控制visible，当请求和赋值完成后，再设置为true，让其渲染
   用属性visible监听显示隐藏（:visible=“visible”）,通过visibleChange事件在事件中改变visible值，这样，当事件中请求和赋值完成后，再把visible设置为true，此时就相当于常量渲染，位置就不会出错

<a-tooltip
	:visible="visible"
	trigger="hover"
	@visibleChange="handleChange"
></a-tooltip>

handleChange(val) {
	if (val && otherConditions) {
		Primise.then((res) => {
			// 赋值content
			this.visible = true
		})
	} else {
		this.visible = val
	}
}

这个方法也有缺点就是如果接口太慢，就要较长才能渲染出来，切没有提示

由于没有看源码，对于原因的分析，也只是自己调试出来的结果，或者说是现象更贴切，如果哪位大佬知道原因，感谢留言，互相学习