vue中keep-alive、activated的探讨和使⽤详解
在修改公司的⼀个项⽬的时候发现了activated这个东西，⼀直觉得很疑惑，之前也没怎么⽤过啊！官⽹的⽣命周期那也没说过这东西啊！⽣命周期不就create mount update 和destory这⼏个东东么，怎么多了个activate出来。
百思不得其解，于是去问了下度娘和查了下⽂档！恍然⼤悟，原来这东东是结合keep-alive这东东使⽤的，下⾯顺便记录⼀下。
keep-alive
<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，⽽不是摧毁他们。其是⼀个抽象的组件，⾃⾝不会渲染⼀个DOM元素，也不会出现在⽗组件链中。
说⽩了被<keep-alive>包裹的组件其会被缓存
废话不多说直接上例⼦.
我们现在创建两个⼦组件conpoment1,compoment2，其内容如下
<template>
<div class="wrapper">
<ul class="content"></ul>
<button class="add" id="add" @click="add">添加⼦元素</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
add() {
let ul = ElementsByClassName("content")[0];
let li = ateElement("li");
li.innerHTML = "我是添加的元素";
ul.appendChild(li);
}
}
};
</script>
<style >
</style>
代码不⽤解释了吧，就是点击按钮在ul动态添加⼀个li元素。
接着我们在路由中注册⼀下，再回到APP.vue中修改⼀下配置
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</template>
这样我们就会发现，当我们切换路由的时候，我们之前添加的⼦元素还回保存在那⾥
如果是这样的话所有的页⾯都被缓存了，⼀些需要重新加载不需要缓存的我们可以通过v-for来实现。当然我们可以在路由中设置⼀个key值来判断组件是否需要缓存，就像下⾯这样
//index.js
{
path: '/1',
name: 'components1',
component: Components1,
meta: {
keepAlive: true  //判断是否缓存
}
},
{
path: '/2',
name: 'components2',
component: Components2,
meta: {
keepAlive: false
}
},
然后我们的App.vue中只需要判断其keepAlive值即可
<div id="app">
<keep-alive>
<router-view v-if="$a.keepAlive" />
</keep-alive>
<router-view v-if="!$a.keepAlive" />
</template>
这时候我们回到页⾯中添加⼦元素并切换路由就会发现只有components1中的组件有缓存。
activated
先说下这个⽣命周期钩⼦，官⽹说其是在服务器端渲染期间不被调⽤，
说⽩了其就是在挂载后和更新前被调⽤的。但如果该组件中没有使⽤缓存，也就是没有被<keep-alive>包裹的话，activated是不起作⽤的。我们直接来试⼀下就知道了。
//components1中
created() {
console.log("1激活created钩⼦函数");
},
activated() {
console.log("1激活activated钩⼦函数");
},
mounted() {
console.log("1激活mounted钩⼦函数");
}
//components2中
created() {
console.log("2激活created钩⼦函数");
},
activated() {
console.log("2激活activated钩⼦函数");
},
mounted() {
console.log("2激活mounted钩⼦函数");
}
我们在2个组件中分别打印出其钩⼦函数执⾏情况。我们可以看到
在执⾏components1时候其是执⾏了activated钩⼦函数的，⽽components2则没有，因为components2并没有被<keep-alive>包裹，所以其并不会激活该钩⼦函数。
当我们再切换⼀次路由的时候⼜发现了神奇的地⽅
springboot原理和生命周期组件1中只执⾏activated钩⼦钩⼦函数，⽽组件2则把创建和挂载的钩⼦函数都执⾏了。
这就是缓存的原因，components其对组件进⾏了缓存所以并不会再⼀次执⾏创建和挂载。
简单的说activated()函数就是⼀个页⾯激活后的钩⼦函数，⼀进⼊页⾯就触发；
所以当我们运⽤了组件缓存时，如果想每次切换都发送⼀次请求的话，需要把请求函数写在activated中，⽽写在created或mounted中其只会在⾸次加载该组件的时候起作⽤。
以上这篇vue中keep-alive、activated的探讨和使⽤详解就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

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