标签：vue E5% deactivated activated E6% 切换 组件
转载：https://www.jianshu.com/p/0272c0fe9392
vue官网的描述：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
通过描述我们知道，它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。
先定义两个组件
a组件.png
b组件.png
父组件内容
父组件.png
界面如下：
界面效果.png
我们点击按钮a切换到a组件，可以看到created和activated执行了。然后我们把a组件的show切换成hide，在进行组件切换。
效果如下：
可以看到离开的A组件的时候deactivated执行了（每次离开当前组件都会执行），再切换回来activated执行了（activated每次切换回来都会执行）、created没有执行（因为组件是缓存并不是销毁，所以created只会执行一次）。而且我们在组件切换之前改的hide，切换回来还是hide，这样就能一直保存组件的状态了。
标签：vue,E5%,deactivated,activated,E6%,切换,组件 来源： https://www.cnblogs.com/lst619247/p/13153830.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。