0

我的 Vue.js 应用程序中有一个动画，它显示在应用程序的一页中。每次我访问该页面时，动画的资源都会从头开始重新下载。destroyed当我离开页面时，应用程序确实得到了。实现此目的的一种方法是使用v-show而不是v-if，这不会破坏它，但是这给我的用例带来了其他问题，因为这样一来，动画就会在主页加载后立即加载，这是我现在想要的。

JS中有没有办法帮助解决这个问题？

该应用程序也是一个PWA并且我有一个service-worker工作，在这种情况下有什么方法可以用来发挥我的优势吗？

4

2 回答 2

0

Vue 提供了一个transition包装器组件，允许您为任何元素或组件添加进入/离开转换：

  • 条件渲染（使用v-if）。
  • 条件显示（使用v-show）。

这意味着v-show加载资产但除了v-if. 此外，transition当您激活条件时，这将适用于两者。这里有一个活生生的例子。

于 2020-04-20T10:54:33.720 回答
0

我找到了一个解决方案，以防其他人遇到同样的问题。

Vue 提供了一个 keep-alive标签，它缓存元素而不破坏它。因此，即使我使用v-if.

关于这个问题vue 2 生命周期的更多细节 - 如何在销毁之前停止？

于 2020-04-20T12:17:39.390 回答