笔记：vue3 ref查找dom元素，解决ref无法获取dom元素的问题

日夜熬夜使我黑眼圈

已于 2022-05-13 16:59:57 修改

阅读量7.3k

点赞数 4

文章标签： vue.js 前端 javascript 视频处理

于 2021-12-03 10:34:11 首次发布

本文链接：https://blog.csdn.net/qiyujie_123/article/details/121692542

版权

最近在用3.2做项目。

在项目中使用 videojs 但是一直有问题就是传ref过去但是找不到video的标签

<template>
    <div class="content">
        <video id="videoPlayer" ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const videoPlayer = ref(null)
console.log(videoPlayer.value) // unidefined

</script>

<style lang="scss" scoped>
.content{
      width: 100%;
      height: 100vh;
      min-width: 1200px;
      video{
          width: 100%;
          height: 100%;
      }
}
</style>

原因：vue生命周期

因为生命周期的问题，vue3中依旧生命周期。只是setup中封装了beforeCreate和created，所以只要在虚拟dom挂载后再去获取到dom就可以解决。

引入mount生命周期即可解决

使用组件内部的方法看我另一篇帖子

vue3如何使用自定义组件内的方法？_日夜熬夜使我黑眼圈的博客-CSDN博客_vue3定义方法

<template>
    <div class="content">
        <video id="videoPlayer" ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script setup>
import { ref, onMounted} from 'vue'
const videoPlayer = ref(null)
// 在这个生命周期再去打印就有了dom
onMounted(() => {
  console.log(videoPlayer.value)
  // <video id="videoPlayer" class="video-js" data-v-7afd26c9=""></video>
})

</script>

<style lang="scss" scoped>
.content{
      width: 100%;
      height: 100vh;
      min-width: 1200px;
      video{
          width: 100%;
          height: 100%;
      }
}
</style>

然后我发现videojs的样式不是很好看兼容上也有一定的问题，文档也不好看就换了xgplayer。

西瓜视频的文档更全、中文文档、使用起来更方便、功能更加多样化，更加方便的是不用自己写。

西瓜播放器 | 快速上手https://v2.h5player.bytedance.com/gettingStarted/#%E5%AE%89%E8%A3%85