代码

 onMounted(() => {
   watchEffect(() => {
     const {width, left} = selectedDiv.value.getBoundingClientRect();
     indicator.value.style.width = width + 'px';
     const {left: containerLeft} = container.value.getBoundingClientRect();
     indicator.value.style.left = left - containerLeft + 'px';
   });
 });

目标效果

实际效果

解决思路

• 这是一个开源项目，用户使用后发现 bug，但是在源文件和编译后都无 bug，猜想是 Vue3 对 watchEffect API 进行了改动。
• 于是去查看 Vue3 官方文档，发现在 3.0.0-rc.13 版本中 watch API 使用 flush：'pre' 代替了flush：'post'。

• 文档中给出了解决办法，增加第二个参数 {flush：'post'} 以在 Vue 渲染更新之后触发回调，而不是之前。

  修复代码

  onMounted(() => {
   watchEffect(() => {
     const {width, left} = selectedDiv.value.getBoundingClientRect();
     indicator.value.style.width = width + 'px';
     const {left: containerLeft} = container.value.getBoundingClientRect();
     indicator.value.style.left = left - containerLeft + 'px';
   }，{ flush: 'post' });
  });