引言

在Web开发中，尤其是在响应式布局设计时，我们常常需要根据HTML元素的尺寸变化来调整页面布局或内容展示。Vue3 提供了强大的响应式机制和Composition API，使得我们可以更灵活地监听并处理DOM元素尺寸的变化。本文将详细介绍如何在Vue3项目中实现这一功能。

一、传统方法：ResizeObserver

ResizeObserver 是浏览器提供的一个API，用于观察目标元素尺寸变化事件，并在其尺寸发生变化时触发回调函数。首先引入 ResizeObserver 并创建一个观察者实例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null); // 存储需要监听的DOM元素引用

    let resizeObserver;
    
    // 当组件挂载时创建ResizeObserver实例并开始监听
    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          console.log('Element size changed:', entry.contentRect.width, entry.contentRect.height);
          // 在这里执行相应的逻辑处理
        });
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    // 组件卸载时停止监听
    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
    };
  },
};

在模板中，绑定目标元素到 targetElement ref：

需要监听大小变化的元素

二、结合Vue3的响应式优势

为了更好地与Vue3的数据响应性相结合，我们可以利用Ref或者Computed属性来存储和更新元素尺寸信息：

import { ref, computed, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    const elementSize = ref({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        elementSize.value = {
          width: entry.contentRect.width,
          height: entry.contentRect.height,
        };
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    // 创建一个计算属性以返回最新尺寸信息
    const reactiveElementSize = computed(() => elementSize.value);

    return {
      targetElement,
      reactiveElementSize,
    };
  },
};

现在你可以在其他组件内部使用 reactiveElementSize 计算属性来获取实时的元素尺寸数据，并据此做出相应布局调整。

在上述代码示例中，elementSize 用于存储元素的尺寸信息（宽度和高度），我们使用了 ref 来定义它。然而，如果你希望 elementSize 对象本身具有响应性，即当对象内部的属性发生变化时也能触发视图更新，那么使用 reactive 可能会更合适。

import { ref, reactive, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    // 使用reactive创建响应式对象
    const elementSize = reactive({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        // 直接修改响应式对象内部属性
        elementSize.width = entry.contentRect.width;
        elementSize.height = entry.contentRect.height;
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
      elementSize,
    };
  },
};

在这种情况下，因为 elementSize 是一个由 reactive 创建的响应式对象，所以在其内部属性 width 和 height 发生变化时，依赖这些值的组件也会自动重新渲染，无需额外的操作。

需要注意的是，在实际应用中，如果只是简单的尺寸数值，使用 ref 足以满足需求，因为 ref 的 .value 属性本身就是响应式的。而 reactive 更适用于需要整个对象结构都具有响应性的场景。

三、总结

Vue3 的 Composition API 结合浏览器原生的 ResizeObserver 可以为我们在监听HTML元素尺寸变化上提供强大而灵活的支持。通过这样的方式，开发者可以轻松应对各种复杂的响应式布局需求，为用户带来更好的交互体验。同时，借助Vue3的数据响应性和自动更新机制，能够在元素尺寸变化时及时刷新视图，保持UI状态与实际DOM的一致性。