在vue3 watchEffect中使用document.xxx.xxx控制台会报的警告

前情：系统需要一条条显示表格数据，让外Modal自适应表格高度，表头不动，表格内容实时滚动到最新一条。

实现：使用watchEffect监听元素高度变化，并实时设置表格的scroll:{y:}，同时重新计算modal高度。

 let theadH = Number(
        document.querySelectorAll('.check .ant-table-thead')[0].clientHeight || 0,
      );
      let frontH = document.querySelectorAll('.checkfront')[0].clientHeight;
      stop.value = watchEffect(() => {
        let t = getDataSource().length;   //此数据被监听，不是无用数据
        let modalH = document.querySelectorAll('.ant-modal-body .scrollbar__wrap')[0].clientHeight;
        document
          .querySelectorAll('.check .ant-table-tbody')[0]
          .scrollIntoView({ behavior: 'smooth', block: 'end' });
        setProps({ scroll: { y: modalH - frontH - theadH } });
        emit('redo');  	//使用此组件处传@redo="redoModalHeight"
      });

上述代码段写在一个方法内，故在外定义变量stop来接收watchEffect，并将其写于函数内，方便组件外部调用：

 function handleStop() {
      unref(stop)();
    }
    return {
      handleStop,
    };

在modal中：

async function handleVisibleChange(visible: boolean) {
      if (!visible) {
        checkRisk.value.setTableData([]);
        checkRisk.value.handleStop();
      }
    }

如果关闭弹窗时不停止监听(checkRisk.value.handleStop())，则第二次打开弹窗时，控制台报警告并死循环，程序卡死。警告如下：
Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function