vue,keep-alive的作用
项目中写vue也没注意到<keep-alive></keep-alive>这个组件,最近在深入的研究vue组件的生命周期函数,每一个函数都是干嘛的,然后其中有activated和deactivated这两个函数与<keep-alive></keep-alive>这个组件有关
activated: keep-alive组件激活时调用deactivated: keep-alive组件停用时调用keep-alive用法
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中- 当组件在
<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行具体的实例如下
- 是一个简单的tab切换,可以尝试把
<keep-alive>去掉之后,对比一下,然后就会发现它的好处
test.vue
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 | <template> <div class="test"> <div class="testNav"> <div :class="{"selected":tab === 1,"testTitle":true}" @click="toTab(1)">标题一</div> <div :class="{"selected":tab === 2,"testTitle":true}" @click="toTab(2)">标题二</div> </div> <div class="container"> <keep-alive> <Test1 v-if="tab === 1"> </Test1> <Test2 v-else> </Test2> </keep-alive> </div> </div></template><script> import Test1 from "./test1.vue"; import Test2 from "./test2.vue"; export default { data() { return { tab: 1, }; }, components: { Test1, Test2, }, methods: { toTab(index) { this.tab = index; }, }, }</script><style lang="less">.test { width: 100%; .testNav { height: 60px; line-height: 60px; display: flex; border-bottom: 1px solid #e5e5e5; .testTitle { flex: 1; text-align: center; } .selected { color: red; } }}</style> |
测试结果如下:
注意看一下页面和控制台输出的信息,可以更加直观的注意到<keep-alive>的作用及activated和deactivated这两个函数什么时候会被触发
- 打开页面,会出现下面这样
用setTimeout模拟请求后端接口的场景
- 点击
title2,出现下面的情况
- 再次点击
title1,出现下面的情况,你会发现从后端请求的数据会快速显示出来,但是如果你此时不用
test1.vue和test2.vue的相关代码如下:
test1.vue
| 123456789101112131415161718192021222324252627 | <template> <div class="test1"> test1 {{testInfo1}} </div></template><script> export default { data() { return { testInfo1: "", }; }, activated() { console.log("测试1被激活"); }, deactivated() { console.log("测试1被缓存"); }, created() { setTimeout(() => { this.testInfo1 = "这是测试一的数据"; }, 2000); }, }</script> |
test2.vue
| 123456789101112131415161718192021222324252627 | <template> <div> test2 {{testInfo2}} </div></template><script> export default { data() { return { testInfo2: "", } }, activated() { console.log("测试2被激活"); }, deactivated() { console.log("测试2被缓存"); }, created() { setTimeout(() => { this.testInfo2 = "这是测试二的数据"; }, 2000); }, }</script> |
转载http://wangyaxing.top/categories/vue/
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： Vue路由开启keep-alive时的注意点
- 下一篇： Vue官方文档梳理-全局API
