vue如何监听符合v-if条件的dom元素渲染完毕

Question

vue如何监听符合v-if条件的dom元素渲染完毕,然后才进行后续的操作，如果不监听拿不到符合条件的dom元素

Answer 1

在 v-if 后面的条件发生变化时调用 nextTick 设置回调函数即可。
比如：

<template>
    <div v-if="isDisplay">Example</div>
</template>

<script>
    export default {
        data() {
            return {
                isDisplay: false
            }
        },
        mounted() {
            this.$http({
                method: 'GET'
                url: 'api.test.com'
            }).then(res => {
                // 更新数据
                this.isDisplay = res.data.isDisplay;
                // 此时 DOM 还没有更新，设置回调函数
                this.$nextTick(function () {
                    // 此时已经渲染完成
                });
            });
        }
    }
</script>

Answer 2

<template>
    <div v-if="isDisplay" @hook="mounted"="handleChildMounted">Example</div>
</template>

注意 mounted 不保证已经被渲染, 在 handleChildMounted 中搭配 $nextClick 来保证子组件渲染结束.