回退时找不到ref问题修复 [ vue video ]

[wuweijia]

有问题的代码

destroyed() {
    const { $refs: { video } } = this 👎 
    dateCollection(title, '跳出', '点击页面的回退按钮', video.currentTime)
    video.removeEventListener('play', playStatus)
    video.removeEventListener('pause', pauseStatus)
    video.removeEventListener('ended', endedStatus)
    video.removeEventListener('webkitendfullscreen', endfullscreenStatus)
},

修改之后的代码

destroyed() {
    const { $currentOpenVideo } = this
    dateCollection(title, '跳出', '点击页面的回退按钮', $currentOpenVideo.currentTime)

    $currentOpenVideo.removeEventListener('play', playStatus)
    $currentOpenVideo.removeEventListener('pause', pauseStatus)
    $currentOpenVideo.removeEventListener('ended', endedStatus)
    $currentOpenVideo.removeEventListener('webkitendfullscreen', endfullscreenStatus)
},

在视频点击播放的地方 缓存当前视频 this.$currentOpenVideo = this.$refs.video

问题分析： 用户播放视频中的过程点击页面或者物理回退事件，触发destroyed事件，这个时候去拿 const { $refs: { video } } = this 里面的refs 显然是不对的, 页面已经销毁了不存在refs， 应该缓存在this下面 或者其他地方 👍