vue中更新了dom而并未获取实时url地址问题

关于使用videoplayer封装后的父子组件，无法播放的问题

内核是vue中更新了dom而并未获取实时url地址问题

一.需求

在这种大数据看板中，我们需要播放m3u8视频流，封装了一个videoplayer组件作为视频播放器，采用的是父子传值的方式。封装的videoplayer组件是子组件，主页面使用的videohls是父组件。

二.出现问题

最先开始一直播放不了，如上图，先排查原因，以为是动态的url在父子传值之中传值成功的原因，但在监听事件中又发现能接收到这个地址

同时也发现只要注释掉这个console.log然后vue页面生成自动刷新以后就可以播放，但是自己手动刷新以后又不播放。
三.得出结论
vue是异步加载的，我们的url又是动态获取的，所以加载了dom以后，url并没有得到及时的更新，也就是动态数据并未实时更新，而重新更改vue以后整个页面又可以播放就说明在dom加载以后重新加载vue以后就可以重新赋值到dom上，说明就是dom加载以后缺少一个把url重新再次赋值上去的操作，此时就应该用nextTick事件。
四.解决方案和心得
在watch监听以后，采用nextTick事件重新将url再赋值上去

很少使用到nextTick事件，查询发现nextTick的原理是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的DOM。
放在我这里的原理就是在dom加载完成以后，watch事件里面获取到父组件传过来的url以后就又重新把这个url放在播放器上再次获取有url以后的dom并渲染。