vue video src改变 页面不刷新的解决方法, vue强制重新渲染

这几天开发中遇到了一个问题，遇到video动态渲染数据，数据已经更新，但是并没有渲染出来，后来无奈百度了一下vue的组件强制刷新：

方案一

当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题

<template>
   <video
          v-if="reFresh"
          id="media"
          style="object-fit:fill;"
          class="videosrc"
          ref="videoPlay"
          controls
          :poster="poster"
          preload="metadata"
          x5-playsinline="true"
          playsinline="true"
          webkit-playsinline="true"
          :src="videoSrc"
        ></video>
</template>
 
<script>
   export default{
     
       data(){
     
          return {
     
                reFresh:true,
            }
       },
       watch:{
     
             menuTree(){
     
 
                  this.reFresh= false
                  this.$nextTick(()=>{
     
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

**

方案二

**

通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。

<template>
   <video
          id="media"
          style="object-fit:fill;"
          class="videosrc"
          ref="videoPlay"
          controls
          :poster="poster"
          preload="metadata"
          x5-playsinline="true"
          playsinline="true"
          webkit-playsinline="true"
          :src="videoSrc"
          :key='menuKey'
        ></video>
</template>
 
<script>
   export default{
     
       data(){
     
          return {
     
                menuKey:1
            }
       },
       watch:{
     
             menuTree(){
     
 
                ++this.menuKey
            }
       }
}
</script>