Vue 3中如何高效地获取与设置DOM元素的高度

在Vue 3中，获取和设置元素的高度通常涉及到对DOM的直接操作。虽然Vue鼓励我们尽量通过数据驱动视图的方式来避免直接操作DOM，但在某些情况下，我们仍然需要直接访问DOM元素。以下是如何在Vue 3中获取和设置元素高度的基本方法。

获取元素高度

要在Vue 3中获取元素的高度，你可以使用ref来引用DOM元素，然后在组件的mounted生命周期钩子中访问这个元素并获取其高度。

<template>  
  <div ref="myElement">Hello, Vue 3!</div>  
</template>  
  
<script>  
import { ref, onMounted } from 'vue';  
  
export default {  
  setup() {  
    const myElement = ref(null);  
  
    onMounted(() => {  
      if (myElement.value) {  
        const height = myElement.value.offsetHeight; // 获取元素高度  
        console.log(height);  
      }  
    });  
  
    return {  
      myElement,  
    };  
  },  
};  
</script>

设置元素高度

设置元素高度同样可以通过ref来引用DOM元素，并在需要的时候修改其style.height属性。

<template>  
  <div ref="myElement">Hello, Vue 3!</div>  
  <button @click="setHeight">设置高度</button>  
</template>  
  
<script>  
import { ref, onMounted } from 'vue';  
  
export default {  
  setup() {  
    const myElement = ref(null);  
  
    const setHeight = () => {  
      if (myElement.value) {  
        myElement.value.style.height = '100px'; // 设置元素高度  
      }  
    };  
  
    return {  
      myElement,  
      setHeight,  
    };  
  },  
};  
</script>

注意事项

• 确保在访问DOM元素属性（如offsetHeight）或修改其样式（如style.height）时，该元素已经被渲染到DOM中。这就是为什么我们在onMounted钩子中执行这些操作的原因。
• 使用ref来引用DOM元素是Vue 3中推荐的方式，因为它与Vue的响应式系统兼容，并且可以在setup函数中使用。
• 尽量避免在模板或计算属性中直接操作DOM，因为这可能会破坏Vue的响应式原则，并导致难以追踪的错误。
• 如果你需要频繁地读取或修改DOM元素的属性，考虑使用Vue的watch或computed属性来响应式地处理这些变化，而不是直接操作DOM。