Vue.js DOM 元素就绪监听：v-if/v-show、mounted 钩子函数、ResizeObserver 和 IntersectionObserver

在 Vue 中可以使用 'v-if' 或 'v-show' 指令来控制元素的显示和隐藏，当元素显示时，就表示该元素已经就绪了。如果需要在元素真正渲染完成后执行一些操作，可以使用 Vue 的生命周期钩子函数 'mounted'。在 'mounted' 钩子函数中可以获取到该组件中的 DOM 元素，并对其进行操作。例如：

<template>
  <div v-if='show'>
    <p>DOM 元素已就绪</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true // 在 DOM 渲染完成后，将 show 置为 true
    const domElement = this.$el // 获取到组件中的 DOM 元素
    // 对 domElement 进行操作
  }
}
</script>

另外，如果需要监听某个元素的尺寸或位置变化，可以使用 'ResizeObserver' 或 'IntersectionObserver' API。这两个 API 都可以监听 DOM 元素的变化，并在变化发生后触发回调函数。例如：

<template>
  <div ref='element'></div>
</template>

<script>
export default {
  mounted() {
    const element = this.$refs.element // 获取到组件中的 DOM 元素
    const observer = new ResizeObserver(() => {
      console.log('DOM 元素的尺寸发生了变化')
    })
    observer.observe(element) // 监听 DOM 元素的尺寸变化
  }
}
</script>