如何判断 Vue 组件是不是因为热重载而被破坏？

Posted 2023-02-22

【中文标题】如何判断 Vue 组件是不是因为热重载而被破坏？

【英文标题】：How to determine whether Vue component is destroyed due to hot reload?如何判断 Vue 组件是否因为热重载而被破坏？

【发布时间】：2021-02-04 20:24:42

【问题描述】：

我有一个 Vue 组件，用于管理设置成本高昂的大量资源（即带有视频流的 WebRTC PeerConnection）。该组件的设计方式使这些繁重的资源保存在其他地方，并在模块重新加载时保留。当组件重新加载（销毁并再次创建）时，它会检查已保存的流并重新部署它而无需重新创建。

然而，这意味着destroyed 钩子实际上并没有破坏任何东西。当用户离开页面并且组件被完全销毁而不是重新加载时，这不是预期的行为。

所以问题是：如何判断组件是被销毁以重新加载（并且资源应该保持原样）还是因为不再需要它（并且应该关闭资源）？

我使用的是 Nuxt，所以 webpack 配置和其他底层相关的东西都由 Nuxt 自己管理。该区域未对 Nuxt 配置进行任何更改。

【问题讨论】：

我猜销毁应该是默认的，一些环境应该保留状态？所以最好告诉保留而不是猜测不要保留

似乎没有办法区分这两个事件（组件的生命周期挂钩中没有某种“热重载”标志）。我只会在开发模式下使用去抖动器：在destroyed 中使用setTimeout 延迟关闭流（例如，200 毫秒），并在created 中停止该计时器，这应该会在不久后发生热重载。

销毁时需要关闭摄像头吗？

不是相机（它是仅接收流），但是是的，流应该在 destorying 时关闭。

【参考方案1】：

老实说，我仍然不太清楚你的问题。

虽然它可以让你知道这一点。

    if (module.hot) 
      module.hot.addStatusHandler(status => 
        if (status === 'idle') 
             // do code here
        
      )