vue中动态添加和删除组件缓存 keep-alive

keep-alive介绍

• Vue的抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中，能将组件在切换过程中将状态保存在内存中，防止重复渲染DOM
• 包裹动态组建时，会缓存不活动的组件实例，而不是销毁它们
• 当组件在 keep-alive内被切换时，它的activated和deactivated这两个生命周期钩子函数将会被执行

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max - 数字。最多可以缓存多少组件实例

匹配规则

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配，这里匿名组件暂时还没有具体搞懂，希望有大神路过此地时指点一二。

注意

• include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
• exclude优先级大于include
• max:最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉
• keep-alive 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册

字符串和数组表示的区别：

• 当:include=""为空字符串时，代表被keep-alive包裹的组件都缓存
• 当:include=[]为空数组时，代表不缓存被keep-alive包裹的组件

嵌套对max的影响

• 外层中设置的max只对它包裹的组件有影响
• 外层嵌套的内层内的缓存组件数量不会加到外层的max上，
• 动态删除外层缓存的某组件，则其内层缓存的组件也会一并删除

keep-alive包裹的组件多出的钩子函数

• activated：组件激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用
• deactivated：组件停用时调用

说明

• 当组件第一次渲染时activated也会被调用，即beforeCreate -> created -> beforeMount -> mounted -> activated
• 当跳转另一组件时即当前组件被停用时，则只会调用deactivated，它的beforeDestroy和destroy不会被调用
• 当再次激活此组件时，则也只会调用activated，其它钩子函数也不会调用

注意

• 只有组件被keep-alive包裹时，这两个生命周期函数才会被调用，正常组件不会调用这两个函数
• 使用exclude排除之后的组件，就算包裹在keep-alive中，这两个函数也不会被调用
• 在服务器端渲染期间不被调用

注意
下面的 思路、实例演示、代码示例 都是基于 动态组件 来实现的，如果Tab切换想通过嵌套路由实现，可参考这篇文章-vue实现Tab切换功能的几种方式

什么是动态组件

让多个组件使用同一个挂载点，并动态切换
component组件和keep-alive一样都是Vue的内置组件，在component里通过v-bind:is来决定哪个组件被渲染，从而实现动态组件切换效果，如

在做Tab切换时，可通过动态组件来实现，如果用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

动态组件传值

componentTabName：为需要传递的数据，名称可自定义

在各组件中通过prop获取即可

  props:{
      componentTabName:String
  }

需求

在项目中经常会有 页面A -> 页面B -> 页面C 则从 页面C 返回 页面B 时 页面B 使用缓存数据，而页面A 跳到 页面B 时，则页面B每次都请求最新数据。
比如我们在某APP内点击 最新新闻(页面A) 选项 跳转到 新闻列表(页面B) 选择某一条新闻 跳转到 新闻详情(页面C) 页面，我们希望，从新闻详情返回到新闻列表时，直接用刚才请求的数据，而不每次都重新发送请求，而从 最新新闻 跳转到 新闻列表时，则都请求最新的数据

思路

1. 通过使用keep-alive的include属性有条件的缓存组件
2. 通过store响应式的修改include属性对应的值
3. 通过组件内导航钩子beforeRouteEnter、beforeRouteLeave给store提交mutations修改

实例演示

代码示例

1：在App.vue组件通过computed计算属性响应式的获取store里的keepAliveArr计算属性，并赋值给keep-alive的include属性，并设置最多可缓存5个组件

tab-goods-recommend代码

tab-goods-detail代码

tab-goods-comment代码

上面的代码应该已经够用，如果需要全部详细代码的就留言吧，我再单独发你