web前端之vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle

在Vue中，可以使用ref属性为DOM元素定义一个引用名称，然后在Vue实例的方法中通过this.$refs来访问这些元素。通过$refs可以获取元素的宽高。

以下是获取元素宽高的几种方法：

1. 在Vue实例的mounted生命周期钩子中获取元素的宽高。
2. 使用window.onresize事件监听器来实时获取元素的宽高。

示例代码：

<template>
  <div>
    <div ref="myElement" style="width: 100px; height: 100px;">
      <!-- 内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.getElementSize();
    window.addEventListener('resize', this.getElementSize);
  },
  beforeDestroy() {
    // 清除事件监听器
    window.removeEventListener('resize', this.getElementSize);
  },
  methods: {
    getElementSize() {
      const myElement = this.$refs.myElement;
      const width = myElement.offsetWidth;
      const height = myElement.offsetHeight;
      console.log(`宽: ${width}, 高: ${height}`);
    }
  }
};
</script>

在这个例子中，当组件被挂载后，getElementSize方法会被调用一次来获取元素的初始宽高。此外，还添加了一个事件监听器来监听窗口的resize事件，当浏览器窗口大小变化时，getElementSize方法会被再次调用以更新宽高信息。记得在beforeDestroy钩子中移除事件监听器，防止内存泄漏。