玩转Vue组件:动态组件、维持组件生命周期与异步组件解析
最编程
2024-01-21 10:09:02
...
动态组件
有些场景可能会需要在多个组件之间进行来回切换,在vue中则使用<component :is="..."> 来实现组件间的来回切换
// App.vue
<template>
<component :is="tabComponent"></component>
<button @click="changeHandler">切换组件</button>
</template>
<script >
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
export default {
data(){
return{
tabComponent:"Component1"
}
},
methods:{
changeHandler(){
this.tabComponent = this.tabComponent == "Component1" ? "Component2" : "Component1"
console.log(this.tabComponent)
}
},
components:{
Component1,
Component2
}
}
</script>
changeHandler()使用三目运算符,来实现Component1和Component2之间的相互切换
// Component1.vue
<template>
<h2>组件1</h2>
</template>
//Component2.vue
<template>
<h2>组件2</h2>
</template>
默认为组件1
组件保持存活
当组件1切换到组件2时,组件1会被强行销毁
// App.vue
<!--html代码(模块展示 显示在页面上的内容)-->
<template>
<component :is="tabComponent"></component>
<button @click="changeHandler">切换组件</button>
</template>
<!--vue代码-->
<script >
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
export default {
data(){
return{
tabComponent:"Component1"
}
},
methods:{
changeHandler(){
this.tabComponent = this.tabComponent == "Component1" ? "Component2" : "Component1"
console.log("切换至组件:")
console.log(this.tabComponent)
}
},
components:{
Component1,
Component2
}
}
</script>
// Component1.vue
<template>
<h2>组件1</h2>
<p>{{ msg }}</p>
<button @click="updateHandler">更新数据</button>
</template>
<script>
export default {
data(){
return {
msg: "老数据"
}
},
methods:{
updateHandler(){
this.msg = "新数据"
}
},
beforeUnmount() {
console.log("组件1被销毁前")
},
unmounted() {
console.log("组件1被销毁")
}
}
</script>
// Component2.vue
<template>
<h2>组件2</h2>
</template>
<script>
export default {
beforeUnmount() {
console.log("组件2被销毁前")
},
unmounted() {
console.log("组件2被销毁")
}
}
</script>
初始态:
点击“更新数据”:
点击“切换组件”:
再次点击“切换组件”:
据上面的图可以发现在切换组件的过程中,更改过后的数据又变回老数据,则说明在组件的切换中,发生了组件的销毁及重建,若想要阻止切换组件时组件的销毁发生,可加上<keep-alive> (强制将被切换的组件使之仍然保持存活状态)
//App.vue 中的 template
<template>
<keep-alive>
<component :is="tabComponent"></component>
</keep-alive>
<button @click="changeHandler">切换组件</button>
</template>
此时,在组件切换的过程中,组件不再被销毁重建
异步组件
当有多个组件存在时,项目的运行时,组件默认会被同步加载
当组件过多时,采用同步加载组件会大大降低运行速度,所以vue提出了异步加载组件的方法:defineAsyncComponent 方法进行实现
实现组件的切换时,没有出现新的网络请求,则说明组件1和组件2一开始就已经被加载
将组件2的导入方式改为以下形式即可实现异步组件的加载:
// App.vue 中的<script>
import Component1 from './components/Component1.vue'
import {defineAsyncComponent} from "vue"
const Component2 = defineAsyncComponent( () =>
import("./components/Component2.vue")
)
可以发现,此时出现了网络请求,说明Component2已实现了异步加载
上一篇: 必备!Docker 常用命令速查表
推荐阅读
-
Vue组件的关键生命周期阶段:创建(created)、挂载(mounted)与销毁(destroyed)
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
全面解读 uniapp 组件生命周期:Vue 阶段与 uniapp 独有部分及其差异,详述涉及的 API 和代码注解示例 - Vue 生命周期篇
-
Vue 3进阶指南:理解组件生命周期与钩子函数(第十部分)
-
Vue: 按需加载的动态组件与异步导入实践指南
-
玩转HarmonyOS 4.0:个性化组件的生命周期管理与路由操作指南
-
玩转Vue组件:动态组件、维持组件生命周期与异步组件解析
-
Vue3新手必看:组件的基本使用方法与高级特性解析
-
玩转Vue3组件:详解组件的构造、参数与事件,深入理解 Slots 和动态组件