vue3动态组件
我们可以使用activated(),在组件激活的时候会被调用,每次进入页面的时候,都会执行,在这个里面进行数据的请求,用来替代mounted。简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示.包裹动态组件时,会缓存不活动的组件实例,而不是销毁它
1.动态组件
让多个组件使用同一个挂载点,并动态切换,这就是动态组件
简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示.
那么vue3在<script setup>
语法糖中如何使用动态组件呢?
针对这个问题,其实 vue官方已经给出了说明。由于组件被引用为变量而不是作为字符串键来注册的,在 <script setup>
中要使用动态组件的时候,就应该使用动态的 :is 来绑定:
<template>
<div>
<component :is="HotCome"></component>
</div>
</template>
<script setup>
import HotCome from "./Hot"
import NewCome from "./New"
</script>
除了直接绑定组件的名字之前还可以使用变量切换组件
<template>
<div>
<p><button @click="current=HotCome">最热插件组件</button> |
<button @click="current=NewCome">最新插件组件</button> </p>
<!-- <component :is="HotCome"></component> -->
<component :is="current"></component>
</div>
</template>
<script setup>
import {reactive,markRaw,ref} from "vue"
import HotCome from "./Hot"
import NewCome from "./New"
const Hot=markRaw(HotCome);
const New=markRaw(NewCome);
const current=ref(Hot);
</script>
2.缓存<keep-alive>
官网解释: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染
-
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
-
可以将动态组件放到组件内对动态组件进行缓存,这样动态组件进行切换的时候,就不会每次都重新创建了。
-
初次进入时:created > mounted > activated;退出后触发 deactivated
-
再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中
<keep-alive>
<component :is="current"></component>
</keep-alive>
在vue的项目中,遇到这样的问题。当使用了keep-alive缓存动态组件以后,每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后,使用mounted进行数据请求以后,会被缓存下来。在下一次进入页面,就不会再重新发起数据请求,直接从缓存中读取数据,就不能拿到最新的数据,对页面进行重新渲染了。这个也并不是我们所想要出现的。
在keep-alive中,有两个生命周期钩子函数,分别是activated()和deactivated()。我们可以使用activated(),在组件激活的时候会被调用,每次进入页面的时候,都会执行,在这个里面进行数据的请求,用来替代mounted。所以,只要将mounted替换为activated就可以解决问题了。
<script setup>
import { onMounted,onActivated } from 'vue';
onMounted(()=>{
console.log("hot触发了生命周期")
})
onActivated(()=>{
console.log("Hot组件进入的时候触发")
})
</script>
更多推荐
所有评论(0)