Vue中WaveSurfer实例应创建于何处？遇<wave>组件注册报错

问题重现 #

你尝试用WaveSurfer.js在Vue项目中展示音频，代码如下：

var wavesurfer = WaveSurfer.create({ 
  container: '#waveform', 
  waveColor: 'red', 
  progressColor: 'purple' 
}); 
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'); 

new Vue({ 
  el: '#app', 
  data: { 
    message: 'data1' 
  }, 
})

但遇到了报错：

Unknown custom element: <wave> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

问题原因 #

这个报错看起来是关于未注册组件，但本质是你在Vue实例完成DOM挂载前就初始化了WaveSurfer。此时Vue还没把#app下的DOM渲染出来，WaveSurfer找不到目标容器#waveform，或者和Vue的DOM管理机制产生了冲突，导致Vue误判WaveSurfer创建的<wave>元素是未注册的组件。

解决方案：将WaveSurfer初始化放到Vue的mounted钩子中 #

Vue的mounted生命周期钩子会在实例成功挂载到DOM后触发，此时#waveform容器已经存在，能确保WaveSurfer正常初始化。同时建议把WaveSurfer实例存在Vue的data中，方便后续操作，还要在组件销毁时清理实例避免内存泄漏：

new Vue({ 
  el: '#app', 
  data: { 
    message: 'data1',
    wavesurfer: null // 存储WaveSurfer实例，方便后续调用API
  }, 
  mounted() {
    // 实例化WaveSurfer
    this.wavesurfer = WaveSurfer.create({ 
      container: '#waveform', 
      waveColor: 'red', 
      progressColor: 'purple' 
    }); 
    // 加载音频
    this.wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
  },
  beforeDestroy() {
    // 组件销毁前销毁WaveSurfer实例，防止内存泄漏
    if (this.wavesurfer) {
      this.wavesurfer.destroy();
    }
  }
})

额外注意事项 #

• 确保你的Vue模板中存在#waveform容器，比如在#app内添加：

  <div id="app">
    <div id="waveform"></div>
    <p>{{ message }}</p>
  </div>
  

• 把实例存在data后，你可以在Vue的方法中直接调用WaveSurfer的API，比如添加播放/暂停按钮：

  <button @click="togglePlay">播放/暂停</button>
  

  methods: {
    togglePlay() {
      this.wavesurfer.playPause();
    }
  }
  

内容的提问来源于stack exchange，提问作者Duo.Liu