vue3 通过ref监听宽度变化

在Vue 3中，可以使用`ref`来监听元素的宽度变化。通常可以通过`ResizeObserver`来实现这一功能。以下是一个简单的示例，展示如何在Vue 3中使用`ref`和`ResizeObserver`来监听元素宽度的变化。

首先，确保你已经安装了Vue 3。然后，可以按照以下步骤进行操作：

1. 创建一个Vue组件。
2. 在组件中定义一个`ref`来引用你想要监听的元素。
3. 使用`ResizeObserver`来监听元素大小的变化。
4. 在组件销毁时，移除监听器以避免内存泄漏。

以下是一个示例代码：

<template>
  <div ref="resizeElement" class="resize-element">
    宽度: {{ width }}px
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';

export default {
  setup() {
    const resizeElement = ref(null);
    const width = ref(0);

    const handleResize = () => {
      if (resizeElement.value) {
        width.value = resizeElement.value.clientWidth;
      }
    };

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver(() => {
        handleResize();
      });
      if (resizeElement.value) {
        resizeObserver.observe(resizeElement.value);
      }
    });

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

    watch(width, (newWidth, oldWidth) => {
      console.log(`宽度变化: ${oldWidth}px -> ${newWidth}px`);
    });

    return {
      resizeElement,
      width
    };
  }
};
</script>

<style scoped>
.resize-element {
  width: 100%;
  height: 100px;
  background-color: lightblue;
}
</style>

在这个示例中，我们使用了`ref`来引用一个`div`元素，并通过`ResizeObserver`来监听其宽度的变化。当宽度变化时，`width`的值会被更新，并在控制台中打印出变化的信息。