vue中动态添加class修改div宽高无法触发addEventListener(“resize“)

项目场景：

vue项目中想实现手动使一个div全屏铺满。我使用得是动态class然后改变布局。

问题描述

在触发事件动态修改class发现resize没有触发。

const toggle = () => {
  isDivscreen.value = !isDivscreen.value
  nextTick(() => {
    isDivscreen.value ? (props.el as HTMLElement).classList.add('_div-full-fixed') : (props.el as HTMLElement).classList.remove('_div-full-fixed')
  })
};

-------------------css-----------------------
._div-full-fixed {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: red;
  width: 500px;
  height: 500px;
}
.screenfull-svg {
  color: $base-navbar-icon-color;
  display: inline-block;
  cursor: pointer;
  font-size: 30px;

  &:hover {
    color: #00dff0;
  }
}

---------------resize-----------
this.dom.addEventListener("resize", this.resize);

---

原因分析：

具体原因没有找到--------无语

---

解决方案：

因为不知道什么原因只能替代了，网上说resize消耗很大，MutationObserver与ResizeObserver更节省性能。

const resizeObserver = new ResizeObserver(this.resize);
      resizeObserver.observe(this.dom);