vue前端开发keepAlive使⽤详解
⽬录
前⾔
keep-avlive钩⼦函数
keep-avlive缓存哪些组件
⼩结及注意事项
前⾔
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，⽽不是销毁它们。
在组件切换过程中将状态保留在内存中，防⽌重复渲染DOM，减少加载时间及性能消耗，提⾼⽤户体验性。使⽤⽅式为
<keep-alive>
<component />
</keep-alive>
这⾥的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 的组件*/
<keep-alive include='test'>
<router-view/>
</keep-alive>
使⽤include是将缓存name为test的组件。
<keep-alive exclude="test">
<router-view/>
</keep-alive>
使⽤exclude，将不缓存name为test的组件。
使⽤route中meta属性的设置缓存组件，如
react router缓存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不需要缓存。在使⽤到中使⽤以下语句动态完成组件缓存设置，设置代码如下
<template>
<div id="app">
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
</div>
</template>
⽰例
设置两个组件KeepCom1，KeepCom2，KeepCom1设置缓存，KeepCom2不设置缓存。同时测试两个钩⼦函数的使⽤，这⾥使⽤路由meta实现缓存组件的设置。
KeepCom1代码如下：
<template>
<div class="wrapper">
<ul class="content"></ul>
<button class="add" id="add" @click="add">添加⼦元素</button>
</div>
</template>
<script>
export default {
name: 'keepCom1',
methods: {
add () {
let ul = ElementsByClassName('content')[0]
let li = ateElement('li')
li.innerHTML = '我是添加的元素'
ul.appendChild(li)
}
},
activated () {
console.log('缓存activated执⾏')
},
deactivated () {
console.log('缓存deactivated执⾏')
}
}
</script>
<style>
</style>
KeepCom2代码如下：
<template>
<div class="wrapper">
<ul class="content"></ul>
<button class="add" id="add" @click="add">添加⼦元素</button>
</div>
</template>
<script>
export default {
name: 'keepCom2',
methods: {
add () {
let ul = ElementsByClassName('content')[0]
let li = ateElement('li')
li.innerHTML = '我是添加的元素'
ul.appendChild(li)
}
},
activated () {
console.log('缓存activated执⾏')
},
deactivated () {
console.log('缓存deactivated执⾏')
}
}
</script>
<style>
</style>
KeepCom1和KeepCom2代码基本⼀致，就是给页⾯增加结点。
keepAvliveTest代码如下
<template>
<div align="center" >
<router-link to="/keepAvliveTest/keepcom1">使⽤缓存</router-link>
<router-link to="/keepAvliveTest/keepcom2">不使⽤缓存</router-link>
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'keepAvliveTest'
}
</script>
<style>
</style>
完成keepcom1和keepcom2组件切换，执⾏后的结果为
keepcom1使⽤缓存，切换页⾯时，上次添加三个元素还在，⽽且钩⼦函数得到执⾏。keepcom2没有使⽤缓存，切换页⾯时，上次添加⼀个元素不存在了，恢复到初始状态。⽽且两个钩⼦没有得到执⾏。
⼩结及注意事项
在设置需要缓存的页⾯时，推荐使⽤router中meta标签，这样代码的耦合度较低。keep-alive 先匹配被包含组件的 name 字
段，如果 name 不可⽤，则匹配当前组件 components 配置中的注册名称。包含在 keep-alive 中，但符合 exclude ，不会调⽤activated和 deactivated
以上就是vue前端开发keepAlive使⽤详解的详细内容，更多关于vue前端的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。