监测DOM元素尺寸大小变化，动态计算元素位置信息——vue_vue3 监视元素大小

目录

一、情况描述： 

 二、上代码：

三、分析：

四、问题 ：

五、优化：

---

一、情况描述： 

其实在网页的布局中我们时常会使用到以下这样的排版方式

（文本一 => 图片一 => 文本二 => 图片二 ...）

 这样就会浮现一个问题，如果网页大小一直是不变，也就是说不改变当前网页宽高的情况下，这样的布局是没有问题的，可是，一旦对网页进行缩放的话，因为当前 文本 和 图片的距离是固定的，所以就会出现错位和相距过大或过小的情况

那么在这种情况下，我们就应该去动态的去计算当前两个文本之间的距离，然后根据计算好的距离去将图片放置在一个合适的位置。

---

 二、上代码：

const translatep = ref("110px");
const arr_text = reactive(['我是第一', '我是第二', '我是第三', '我是第四']);
 
let end = 0;
let start = 0;
 
const translateData = (divF: any) => {
  divF.forEach((item: any, index: number) => {
    if (index === 0 || index === 1) {
      if (index === 1) end = item.getBoundingClientRect().x
      if (index === 0) start = item.getBoundingClientRect().x
    }
  })
  translatep.value = (end - start - 50) / 2 + 50 - 12.8 + 'px'
  console.log((end - start - 50) / 2 + 50 - 12.8 + 'px')
}
 
onMounted(() => {
  let divF = document.querySelectorAll(".span-flex .trend-point-wrap-item");
  translateData(divF)
  let deRest = debounce(() => translateData(divF))
  window.addEventListener("resize", () => { 
  translateData(divF)
  })
})

---

三、分析：

1. item.getBoundingClientRect().x 返回元素的大小及其相对于视口的位置。

2. (end - start - 50)  / 2 + 50 - 12.8 + 'px'  

   end：文本二视口左上角x坐标

   start：文本一视口左上角x坐标

   50：文本的宽度（一般都是一样的）

   /2：两个文本中间的位置

   12.8：文本宽度的一半（我这里文本宽为25.6px）

---

四、问题 ：

虽然上述代码确实可以做到动态计算这个功能，但是就目前而言，还是有两点问题：

1. 如果频繁的去改变网页的宽度，那么就会一直进行计算，浪费资源
2. 因为使用的是 window.addEventListener("resize",() => {})，在监听窗口变化时，固然起到很好的效果，但是对于网页性能消耗过大。因为html中每个标签的变化，都会触发当前监听事件。

---

五、优化：

问题一：可以使用防抖函数去处理解决。

//防抖
const debounce = <T>(fn: (...args: any[]) => T, delay = 500) => {
  let timer: number | null = null;
  let result: T | null = null;
  return (...args: any[]) => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = window.setTimeout(() => {
      result = fn(...args);
    }, delay);
    return result;
  };
}
 
let deRest = debounce(() => translateData(divF))
 
deRest()

问题二：需要使用到 ResizeObserver （对指定element和svgelement元素进行监听）

  let element: any = document.querySelector('.span-flex')
  var ro = new ResizeObserver(entries => {
    for (let _entry of entries) {
      deRest()
    }
  });
  // 观察一个或多个元素
  ro.observe(element);
})