在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