家政行业网站建设方案,设计师常用的网站,通化公司做网站,包头建设安全协会网站目录 加载速度的优化示例代码总结 欢迎关注 『VUE』 专栏#xff0c;持续更新中 欢迎关注 『VUE』 专栏#xff0c;持续更新中 加载速度的优化
实际项目中你可能会有几十个组件,如果一开始就加载了全部组件(哪怕其中有些组件你暂时用不到)这无疑大大增加了响应时间,用户体验… 目录 加载速度的优化示例代码总结 欢迎关注 『VUE』 专栏持续更新中 欢迎关注 『VUE』 专栏持续更新中 加载速度的优化
实际项目中你可能会有几十个组件,如果一开始就加载了全部组件(哪怕其中有些组件你暂时用不到)这无疑大大增加了响应时间,用户体验很差. 我们这里就直接加载了componentA和B,但是实际上如果不点击切换组件,我们暂时用不到B. 与前面的同步相对的就是异步,你加载当前需要用的个别组件,分步骤而不是同一步骤加载所有组件. 示例代码
注意异步引用的方式import { defineAsyncComponent } from vue;然后const ComponentB defineAsyncComponent(() import(./components/ComponentB.vue) );
script
import { defineAsyncComponent } from vue;
import ComponentA from ./components/ComponentA.vue;
//import ComponentB from ./components/ComponentB.vue;
const ComponentB defineAsyncComponent(() import(./components/ComponentB.vue)
);
/scriptApp.vue
templateKeepAlivecomponent :ischoseComponent/component/KeepAlivebutton clickchangeComponent切换组件/button
/templatescript
import { defineAsyncComponent } from vue;
import ComponentA from ./components/ComponentA.vue;
//import ComponentB from ./components/ComponentB.vue;
const ComponentB defineAsyncComponent(() import(./components/ComponentB.vue)
);export default {data() {return {choseComponent: ComponentA,};},components: {ComponentA,ComponentB,},methods: {changeComponent() {console.log(this.choseComponent);this.choseComponent this.choseComponent ComponentA ? ComponentB : ComponentA;},},
};
/script
网页刚刚加载时只有A的加载没有B 只有在组件切换到B时才加载了B 总结
大家喜欢的话给个点个关注给大家分享更多计算机专业学生的求学之路
版权声明
发现你走远了mzh原创作品转载必须标注原文链接
Copyright 2024 mzh
Crated2024-3-1 欢迎关注 『VUE』 专栏持续更新中 欢迎关注 『VUE』 专栏持续更新中 『未完待续』
