如何在 VueJs 中再次加载（重新加载）组件或销毁它并再次加载？

Question

我在 VueJs 中有一个组件，例如 Player（或任何其他组件），用于播放音频和管理播放列表。

现在，当我更改播放列表而不更改路线时，我需要重新加载它。有没有办法重新加载组件或销毁它然后立即加载它？

我想在this组件播放音乐的时候改变它的播放列表，但有时它会播放上一个播放列表的音乐，我不知道为什么。

HTML 段：

<aplayer autoplay
  ref="remote"
  :music="music_list[0]"
  :list="music_list"
  :float="float"
  :mutex="mutex"
  repeat="list"
  :mini="mini"
  preload="auto"
  @ended="onEnd"
  @loadstart="playCMD"
  @playing="onStart"
  :listFolded="listFolded"
  :controls="controls"
  :muted.sync="muted"
  :volume.sync="volume"
  slot="display"
/>

JavaScript 段：

export default {
  components: {
    Aplayer
  },
  data: () => ({
    float: false,
    autoplay: true,
    mutex: true,
    muted: false,
    volume: 0.8,
    mini: false,
    listFolded: false,
    controls: true,
    music_list: [..]
  }),
  methods: {
    onEnd: function () {
      // Doing a series of jobs that leads to raising an event then
      this.music_list = [new music list after event trigger]
    }
  }
}

Answer 1

您的更改没有被采纳的原因是您（或播放器组件）没有正确利用 Vue 的反应系统。您应该使用the appropriate array mutation method，以便维护array reactivity。 Vue 不会拾取直接对数组元素所做的更改。

意思是，当你做这样的事情时：

this.myArray[1] = "some new value";

这些更改将不会被 Vue 采用。

---

Vue中操作数组的正确方法

使用您的onEnd 方法，尝试将代码更改为此......

onEnd: function () {
  // Assumption: resultOfSomeJob is an array of songs for the playlist

  // Clear our playlist
  this.music_list = [];

  // Push elements to our music_list using the Vue array method "push"
  this.music_list.push(...resultOfSomeJob);
}

编辑：

我查看了aplayer 组件代码。我的答案有效的原因是因为它需要您提供的:list，以及computes a new property、musicList。

（这里是代码，以防将来发生变化）

musicList () {
  return this.list
}

我发现 Vue 文档中的 this excerpt 非常有助于理解这里发生了什么...

计算的属性根据它们的反应依赖进行缓存。计算属性仅在其某些反应性依赖项发生更改时才会重新评估。

因此，当您更改数组而不使用适当的方法来保持反应性，然后将其传递给a-player 组件时，计算属性不会更新。因此，您的旧播放列表仍然存在 :)

Answer 2

最简单的 hack，只需使用 v-if:

<aplayer v-if='loaded' />

脚本

export default {
  components: { Aplayer },
  data: () => ({
    loaded: true,
  }),
  methods: {
    onEnd: function () {
      // when you want to reload the component just make `loaded = false`
      this.loaded = false;
      // load agin with `setTimeout` or promise 
      // or with your logic - whenever the component is ready to show
      setTimeout(() => {
        this.loaded = true
      }, 500); // delay in ms
    }
  }
}