<template>
    <div ref="divDom"></div> //你可以手動(dòng)或者換成可拖拉伸縮的盒子
    <div ref= "div2" :style="{'width':leftShowWith.with}"></div>
</template>
 
第一種  獲取方式
<script setup>
import {useResizeObserver} from "@vueuse/core";
const divDom =ref();
const leftShowWith  = reactive({
  with:'500px'
});
useResizeObserver(divDom , (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  console.log(`width: ${width}, height: ${height}`)
  console.log(`${width}px`)
  leftShowWith.with = `${width}px`;
})
</script>

<template>
    <div ref="divDom"></div>
</template>
第一種  獲取方式
<script setup>
    import { ref, getCurrentInstance } from 'vue';
    const divDom = ref(null);
    onMounted(()=>{
        console.log('獲取dom元素',divDom)
    })
    // 獲取頁面的實(shí)例對(duì)象
    const pageInstance = getCurrentInstance();
    // 獲取dom節(jié)點(diǎn)對(duì)象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>
第一種  獲取方式
<script setup>
const divDom =ref();
</script>

<div ref="init"></div> 
寫在 頁面 方法 部分
這里的 offsetHeight 是返回元素的寬度（包括元素寬度、內(nèi)邊距和邊框，不包括外邊距）
let height= this.$refs.init.$el.offsetHeight;  
let height= divDom.VALUE.$el.offsetHeight;   // 在Vue3 中的寫法
 
這里的offsetHeight可以替換，用來獲取其他的屬性
offsetWidth       //返回元素的寬度（包括元素寬度、內(nèi)邊距和邊框，不包括外邊距）
offsetHeight      //返回元素的高度（包括元素高度、內(nèi)邊距和邊框，不包括外邊距）
clientWidth        //返回元素的寬度（包括元素寬度、內(nèi)邊距，不包括邊框和外邊距）
clientHeight       //返回元素的高度（包括元素高度、內(nèi)邊距，不包括邊框和外邊距）
style.width         //返回元素的寬度（包括元素寬度，不包括內(nèi)邊距、邊框和外邊距）
style.height       //返回元素的高度（包括元素高度，不包括內(nèi)邊距、邊框和外邊距）
scrollWidth       //返回元素的寬度（包括元素寬度、內(nèi)邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientWidth相同
scrollHeigh       //返回元素的高度（包括元素高度、內(nèi)邊距和溢出尺寸，不包括邊框和外邊距），無溢出的情況，與clientHeight相同
除此之外，還可以獲取帶有單位的數(shù)值
let height = window.getComputedStyle(this.$refs.init).height; 
這樣獲取的值是有單位的。