vue 导出大数据量excel 页面 loading 不生效

如图，表格里面有9W+数据。在执行导出的时候页面会出现卡住的假象，并且loading改成了true，但并没有加载动画。

开始这样写的，打印出的spinning 已经是ture ，但加载动画并没有执行。

    const exportExcelClick = () => {
      const Header = [...]; //表头
      const Val = [...]; //表数据
      sdata.spinning = true; // 加载中
      console.log( sdata.spinning," sdata.spinning");
      const data = sdata.tableData;
      const title = `核酸采样信息表`;
      exportExcel(Header, Val, data, title); // 导出excel
      sdata.spinning = false;   // 加载结束
    };

于是修改成了

    const exportExcelClick = () => {
      const Header = [...]; //表头
      const Val = [...]; //表数据
      sdata.spinning = true; // 加载中
      console.log( sdata.spinning," sdata.spinning");
      const data = sdata.tableData;
      const title = `核酸采样信息表`;
      setTimeout(() => {
         exportExcel(Header, Val, data, title); //导出excel
      }, 100);
      setTimeout(() => {
        sdata.spinning = false;   // 加载结束
      }, 100);
    };

我的理解是，整个方法体里是一个宏任务，但执行到settimeout的时候会，开启另外一个宏任务，此时这个方法体里就有3个宏任务，先执行了赋值，加载状态赋值，页面的loading就开始转起来。然后执行第二个宏任务，导出excel，完毕之后开始执行第三个宏任务，结束加载的赋值。
然后页面的加载动画就可以正常实现了。