keep-alive以及activated,deactivated生命周期的用法

这是在网上看到的一篇文章

vue官网的描述:

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 < transition> 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

使用例子说明起来更好理解:
先定义两个组件
组件a内容:
vue中keep-alive以及activated,deactivated生命周期的用法
组件b内容:
vue中keep-alive以及activated,deactivated生命周期的用法
父组件内容:
vue中keep-alive以及activated,deactivated生命周期的用法
界面如下:
vue中keep-alive以及activated,deactivated生命周期的用法
我们点击按钮a切换到a组件,可以看到created和activated执行了。然后我们把a组件的show切换成hide,在进行组件切换。
vue中keep-alive以及activated,deactivated生命周期的用法
效果如下:
可以看到离开的A组件的时候deactivated执行了(每次离开当前组件都会执行),再切换回来activated执行了(activated每次切换回来都会执行)、created没有执行(因为组件是缓存并不是销毁,所以created只会执行一次)。而且我们在组件切换之前改的hide,切换回来还是hide,这样就能一直保存组件的状态了。
vue中keep-alive以及activated,deactivated生命周期的用法

相关文章:

  • 2022-12-23
  • 2022-01-29
  • 2022-12-23
  • 2018-05-15
  • 2022-12-23
  • 2021-05-20
  • 2022-12-23
  • 2021-09-17
猜你喜欢
  • 2022-12-23
  • 2022-01-21
  • 2022-12-23
  • 2021-05-31
  • 2022-12-23
  • 2022-02-22
相关资源
相似解决方案