VUE如何判断V-IF中的DOM元素渲染完毕？

在 Vue 中，可以使用 `vm.$nextTick(callback)` 方法来判断 `v-if` 中的 DOM 元素是否已经渲染完毕。

`vm.$nextTick(callback)` 方法会在 DOM 更新后立即执行给定的回调函数（在下一次 DOM 更新循环结束之后）。这意味着当你在回调函数中访问 DOM 元素时，它们已经被更新了。

具体来说，可以在 `v-if` 的元素上添加一个 `ref` 属性，然后在 `vm.$nextTick()` 的回调函数中使用 `this.$refs.refName` 来访问该元素。例如：

<template>
  <div>
    <div v-if="show" ref="myDiv">这是一个元素</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    checkDom() {
      this.$nextTick(() => {
        const myDiv = this.$refs.myDiv;
        console.log(myDiv.clientHeight);
      });
    },
  },
  created() {
    this.checkDom();
  },
};
</script>

在上述示例中，`checkDom()` 方法在组件创建时被调用，它调用了 `this.$nextTick()` 方法并在回调函数中访问了 `ref="myDiv"` 的元素 `myDiv`。这样就可以在 DOM 更新后获取 `myDiv` 的高度等属性了。