在vue中的beforedestroy方法里执行异步代码操作dom报错？

Question

beforeDestroy() {
  if (this.players.length) {
    this.delPlayer()
  }
},
methods: {
  delPlayer() {
    return new Promise((resolve, reject) => {
      if (!this.players.length) {
        resolve()
        return
      }
      for (const [index, item] of this.players.entries()) {
        item.player.stop().then(() => {
          document.getElementById(`video${index}`).remove();
          if (index + 1 === this.players.length) {
            resolve()
          }
        })
      }
    })
  }
}

如何在beforedestroy方法里执行异步代码操作dom?

Answer 1

错误信息：你不能读取null上的属性remove。不就是你getElementById获取到的是null。

针对这个错误，一般是做容错，判断获取到dom了再进行后续的remove操作。

但这里是因为你在beforeDestroy中执行的，他都要Destroy注销了，你还删除他干嘛，vue会把他删掉的，不用你来操作了，你把相关的变量清空，定时器取消就行。

Answer 2

在onBeforeUnmount钩子里面可以操作dom，不过确实没必要这么删除播放器