Javascript 在我的组件生命周期中，我什么时候可以开始访问它。$refs？

在加载以下单个文件Vue.js组件时，我试图连接到一些HTML5音频事件：

<template>
    <audio ref="player" v-bind:src="activeStationUrl" v-if="activeStationUrl" controls autoplay></audio>
</template>

<script>
export default {
    props: ['activeStationUrl'],
    data () {
        return {
            // Last media event that was recorded. We don't hook in to all events. More info at
            // https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics.
            'lastEvent': null,
        }
    },
    mounted () {
        const eventsToHookInTo = ['loadstart', 'canplay']
        for (var eventToHookInTo in eventsToHookInTo) {
            this.$refs.player.addEventListener(eventToHookInTo, function () {
                this.lastEvent = eventToHookInTo
            })
        }
    },
}
</script>

导出默认值{
道具：['activeStationUrl']，
数据（）{
返回{
//上次录制的媒体事件。我们不会连接到所有事件。更多信息，请访问
// https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics.
“lastEvent”：null，
}
},
挂载（）{
const eventsToHookInTo=['loadstart'，'canplay']
for（eventsToHookInTo中的var eventToHookInTo）{
此.refs.player.addEventListener（eventToHookInTo，函数（）{
this.lastEvent=eventToHookInTo
})
}
},
}

---

当带有

this.$refs

的行触发时，参考

player

似乎尚未注册，因此会导致错误。加载组件时，连接这些事件侦听器的正确方法是什么？

您应该能够在

挂载的
钩子中访问它。我猜问题出在这里的
v-if
。您是否可以将其更改为
v-show

如果你不能做到这一点，你可以尝试使用一种方法。这应该也可以，因为元素的实际渲染要到下一个刻度才会发生。
我担心将
v-if
更改为
v-show
会在切换源时对音频元素造成不必要的行为，但在测试后似乎没有问题。这种方法和
this.$nextTick（函数…
选项似乎都能工作！