vue前端开发keepAlive怎么用

这篇文章给大家分享的是有关vue前端开发keepAlive怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

前言

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。使用方式为

这里的component会被缓存。

keep-avlive钩子函数

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated与deactivated。activated：在 keep-alive 组件激活时调用，keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务
deactivated：在 keep-alive 组件停用时调用，使用了keep-alive就不会调用beforeDestory和destoryed钩子，因为组件没有被销毁，而是被缓存起来了，所以deactivated钩子可以看做是beforeDestory和destoryed的替代，如清空localStorge数据等。

keep-avlive缓存哪些组件

keep-avlive缓存哪些组件通过两种方式，一种是通过keep-avlive组件提供的include、exclude属性通过参数进行匹配对应的组件进行缓存，另一种通过route中meta属性的设置。
使用include、exclude属性完成缓存组件设置

/*将缓存 name 为 test 的组件*/      

使用include是将缓存name为test的组件。

使用exclude，将不缓存name为test的组件。
使用route中meta属性的设置缓存组件，如

export default new Router({  mode: 'history',  routes: [    {      path: '/',      name: 'home',      component: Home,      redirect: 'goods',      children: [        {          path: 'goods',          name: 'goods',          component: Goods,          meta: {                keepAlive: false // 不需要缓存            }        },        {          path: 'ratings',          name: 'ratings',          component: Ratings,          meta: {                keepAlive: true  // 需要缓存            }        }      ]    }  ]})

goods组件需要缓存，ratings不需要缓存。在使用 到中使用以下语句动态完成组件缓存设置，设置代码如下

示例

设置两个组件KeepCom1，KeepCom2，KeepCom1设置缓存，KeepCom2不设置缓存。同时测试两个钩子函数的使用，这里使用路由meta实现缓存组件的设置。
KeepCom1代码如下：

KeepCom2代码如下：

KeepCom1和KeepCom2代码基本一致，就是给页面增加结点。
keepAvliveTest代码如下

完成keepcom1和keepcom2组件切换，执行后的结果为

keepcom1使用缓存，切换页面时，上次添加三个元素还在，而且钩子函数得到执行。keepcom2没有使用缓存，切换页面时，上次添加一个元素不存在了，恢复到初始状态。而且两个钩子没有得到执行。

感谢各位的阅读！关于"vue前端开发keepAlive怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！