在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。
百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。
顺便插个tip:富途2023届校招内推，需要内推的联系我哈！
keep-alive
说白了被
废话不多说直接上例子.
我们现在创建两个子组件conpoment1,compoment2,其内容如下
Jetbrains全家桶1年46，售后保障稳定
代码不用解释了吧，就是点击按钮在ul动态添加一个li元素。
接着我们在路由中注册一下，再回到APP.vue中修改一下配置
这样我们就会发现，当我们切换路由的时候，我们之前添加的子元素还回保存在那里
如果是这样的话所有的页面都被缓存了，一些需要重新加载不需要缓存的我们可以通过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值即可
这时候我们回到页面中添加子元素并切换路由就会发现只有components1中的组件有缓存。
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并没有被
当我们再切换一次路由的时候又发现了神奇的地方
组件1中只执行activated钩子钩子函数，而组件2则把创建和挂载的钩子函数都执行了。
这就是缓存的原因，components其对组件进行了缓存所以并不会再一次执行创建和挂载。
简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；
所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/142355.html