关于vue中this.$refs.xx获取到的是undefined的问题

<div class="controls-play" v-show="isShowControls">
<div class="flex flex-j-between flex-a-center">
        <div class="flex flex-a-center">
                <span @click="suspend()" :class="['iconfont',isPlay?'icon-pause':'icon-PLAY']"></span>
                <span>{{currentTime|formatTime}}/{{duration|formatTime}}</span>
        </div>
        <div class="flex flex-a-center">
                <div class="mr20 iconfont icon-yinliang" @click="setMuted()">
                        <span class="muted" v-show="isMuted"></span>
                </div>
                <div class="mr20 rate-wrap">
                        <span @click="isShowRateBtn=true">{{activeRate}}x</span>
                        <div class="rate-option" v-show="isShowRateBtn">
                                <div @click="changeRate(item)" :class="[activeRate===item?'select':'']"
                                        v-for="item in ['2','1.5','1.25','1']" :key="item">{{item}}x</div>
                        </div>
                </div>
                <span :class="['iconfont',isExpand?'icon-compress':'icon-expand']"
                        @click="isExpand=!isExpand"></span>
        </div>
</div>
<div>
        <div class="all-duration" ref="allDuration">
                <div class="progress" ref="process" :style="{width:processWidth}">
                        <span class="end-btn" ref="endBtn"></span>
                </div>
        </div>
</div>
</div>

1. 遇到的问题：当我获取this.$refs.endBtn时，返回的是undefined值，但是console输出this.$refs时是可以看到endBtn绑定的dom元素

2. 问题原因：因为我使用了v-if来控制整个容器的动态展示，页面dom刚加载完成时，isShowControls这时候为false,并不会加载该dom,所以导致获取到的this.$refs.endBtn为undefined,

3. 如果使用 v-if ，dom 就不会被渲染， ref 会一直获取的是undifined，这时可以采用v-show,无论isShowControls为何值，该dom都会被加载。