vue3中实现监听dom

 在vue3遇到业务需要监听窗口大小然后改变dom大小，下面是实现思路

 1.dom

    <div class="dom"></div>

 2.组件初始化获取dom

//获取dom
const dom = ref()

const updateDomWidth = () => {
    dom.value = document.querySelector('dom')
    //可以根据dom的值做业务逻辑处理
};

const resizeListener = () => {
    nextTick(updateDomWidth);
};

onMounted(async () => {
    // 在页面初始化时执行一次DOM宽度监测(如果获取不到dom可以考虑异步获取，加一个定时器)
    updateDomWidth() 
    // 添加窗口大小调整事件监听器
    window.addEventListener('resize', resizeListener);
});

onUnmounted(() => {
    // 在组件卸载时移除事件监听器，以避免内存泄漏
    window.removeEventListener('resize', resizeListener);
});

 总体就是页面加载第一次先获取dom然后添加"resize"事件，然后监听窗口变化！离开页面卸载事件监听