个人网站模板的优缺点,wordpress首页定制,聚名网是干嘛的,大连建行网点查询一、组件保持存活
1、需求描述
点击按钮跳转到其他组件后#xff0c;原组件不会被销毁
2、知识整理
1#xff09;组件生命周期
创建期#xff1a;beforeCreate、created
挂载期#xff1a;beforeMount、mounted
更新期#xff1a;beforeUpdate、updated
销毁期原组件不会被销毁
2、知识整理
1组件生命周期
创建期beforeCreate、created
挂载期beforeMount、mounted
更新期beforeUpdate、updated
销毁期beforeUnmount、unmounted
2)保持组件存活keep-alive keep-alivecomponent :istabComponent/component/keep-alive
3实现异步组件加载
defineAsyncComponent
3、代码演示
1文件 2App.vue文件
templatekeep-alivecomponent :istabComponent/component/keep-alivebutton clickchangeHandle切换按钮/button
/template
script
import ComponentA from ./components/ComponentA.vue;
import ComponentB from ./components/ComponentB.vue;
export default{data(){return{tabComponent:ComponentA}},components: { ComponentA,ComponentB},methods:{changeHandle(){this.tabComponentthis.tabComponentComponentA?ComponentB:ComponentA}}
}
/script3ComponentA.vue文件
templateh3ComponentA/h3p{{ message }}/pbutton clickupdateHandle更新数据/button
/template
script
export default{data(){return {message:老数据}},beforeUnmount(){console.log(组件卸载之前);},unmounted(){console.log(组件卸载之后);},methods:{updateHandle(){this.message新数据}}
}
/script4ComponentB.vue文件
templateh3ComponentB/h3
/template
script/script5、效果展示
1打开浏览器 2点击“更新数据”按钮“老数据”将变为“新数据”
3点击“切换按钮”跳转到组件B中
4再点击“切换按钮”跳转回组件A仍保持显示“新数据” 二、 异步加载组件
1、关键代码 App.vue文件
script
import ComponentA from ./components/ComponentA.vue;
//import ComponentB from ./components/ComponentB.vue;
//异步加载B组件
import { defineAsyncComponent } from vue;
const ComponentBdefineAsyncComponent(()import(./components/ComponentB.vue))
2、效果展示
1登录浏览器 B组件未被加载
2点击切换按钮后才加载B组件 三、学习链接
https://www.bilibili.com/video/BV1Rs4y127j8?p37spm_id_frompageDrivervd_source841fee104972680a6cac4dbdbf144b50
