关于 vue3 的 onMounted 获取不到 ref

在 Vue 中，onMounted 钩子函数会在组件被挂载到 DOM 后立即调用。然而，如果在父组件的 onMounted 钩子函数中尝试获取子组件的 DOM 元素，可能会遇到问题，因为子组件可能还没有完成挂载。

如果需要在父组件的 onMounted 钩子函数中获取子组件的 DOM 元素，你可以使用 nextTick() 方法。nextTick() 方法会在下一次 DOM 更新循环结束之后延迟执行回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

以下是一个示例：

import { nextTick } from 'vue';

onMounted(() => {
  nextTick(() => {
    // 在这里获取 DOM 元素
    init();
  });
});

在上面的代码中，我们在 onMounted 钩子函数中使用了 nextTick() 方法来延迟执行 init 函数。这样，当 init 函数被调用时，子组件的 DOM 元素应该已经被挂载到 DOM 中，此时应该能够获取到它们。

当然，如果不确定下一次一定会获取到它们，还可以使用我喜欢的终极方案 watch：

onMounted(() => init()) // 正常加载
watch(toRef(elRef), () => init()); // 如果绑定的 ref 元素发生了变化，则会加载 init

在这里，通过监听 elRef 元素的变化，来执行 init 方法。因为 watch 是惰性监听，仅在监听源发生变化时才会执行，所以不用担心第一次绑定时会在 onMounted 和 watch 中触发两次 init。