标签：缓存 string 05 deactivated alive keep Vue 组件

动态组件 & 异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

切换组件案例

点击一个tab-bar，切换不同的组件显示

　　方式一：通过v-if来判断，显示不同的组件；
　　方式二：动态组件的方式

# 1
<template v-if="currentTab === 'home'">
    <home></home>
</template>
<template v-else-if="currentTab === 'about'">
    <about></about>
</template>
<template v-else>
    <category></category>
</template>

#2
<component :is="currentTab"></component>

注意：切换组件后，原组件会被销毁掉，再次回来时会重新创建组件。在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：

keep-alive

<keep-alive include="home,about">
      <component :is="currentTab"></component>
</keep-alive>

keep-alive属性     内置组件 | Vue.js https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive

　　include - string | RegExp | Array。只有名称匹配的组件会被缓存；
　　exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；
　　max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

缓存组件的生命周期　

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的：
　　但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；
　　这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听

activated() {
      console.log(activated)
    },
    deactivated() {
      console.log(deactivated)
    },

标签：缓存,string,05,deactivated,alive,keep,Vue,组件
来源： https://www.cnblogs.com/hexrui/p/15709326.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。