【Vue3基础】组件保持存活、异步加载组件

一、组件保持存活

1、需求描述

点击按钮跳转到其他组件后,原组件不会被销毁

2、知识整理

1)组件生命周期

创建期:beforeCreate、created

挂载期:beforeMount、mounted

更新期:beforeUpdate、updated

销毁期:beforeUnmount、unmounted

2)保持组件存活keep-alive

 
    
  

3)实现异步组件加载

defineAsyncComponent

3、代码演示

1)文件

【Vue3基础】组件保持存活、异步加载组件_第1张图片

 2)App.vue文件



3)ComponentA.vue文件



4)ComponentB.vue文件



5、效果展示

1)打开浏览器

 2)点击“更新数据”按钮,“老数据”将变为“新数据”

3)点击“切换按钮”,跳转到组件B中

4)再点击“切换按钮”,跳转回组件A,仍保持显示“新数据”

【Vue3基础】组件保持存活、异步加载组件_第2张图片>【Vue3基础】组件保持存活、异步加载组件_第3张图片>【Vue3基础】组件保持存活、异步加载组件_第4张图片>【Vue3基础】组件保持存活、异步加载组件_第5张图片

二、 异步加载组件

1、关键代码 App.vue文件


                    
                    

你可能感兴趣的:(学习,vue3)