1.动态组件
<template>
<div>
<h1>组件切换</h1>
<component :is="currentComponent"></component>
<button @click="toggleComponent">点击切换组件</button>
</div>
</template>
<script setup lang="ts">
import { markRaw, shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';
const currentComponent = shallowRef(markRaw(ComponentA));
const toggleComponent = () => {
currentComponent.value = currentComponent.value === ComponentA ? markRaw(ComponentB) : markRaw(ComponentA);
};
</script>
<!-- markRaw 方法用于将一个对象标记为 "原始",从而告诉 Vue 不需要将其转换为响应式对象。标记为 "原始" 的对象在响应式系统中不会被追踪更改,这可以帮助避免不必要的性能开销。
shallowRef 是用于创建一个浅的响应式引用的方法。与 ref 创建的响应式引用不同,shallowRef 不会对其内部对象进行深度观察,而只观察引用本身的变化。这意味着只有当引用本身发生变化时,才会触发更新,而不会递归观察引用内部对象的变化。
这两个方法通常用于特定场景下的性能优化。
在上述修改代码的例子中,我们使用 markRaw 将组件标记为非响应式的,避免了不必要的性能开销。而使用 shallowRef 创建浅的响应式引用,只观察引用本身的变化,而不观察组件内部的变化。这样可以保证在切换组件时,只有引用本身变化时才会触发组件的更新,提高了性能效率。 -->
当使用 <component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <KeepAlive>组件强制被切换掉的组件仍然保持“存活”的状态。文章来源:https://www.toymoban.com/news/detail-715333.html
文章来源地址https://www.toymoban.com/news/detail-715333.html
2.异步组件
<template>
<div>
<h1>组件切换</h1>
<Keep-alive><component :is="currentComponent"></component></Keep-alive>
<button @click="toggleComponent">点击切换组件</button>
</div>
</template>
<script setup lang="ts">
import { markRaw, shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import { defineAsyncComponent } from 'vue'
const ComponentB =defineAsyncComponent(()=>import ("./components/ComponentB.vue"))
const currentComponent = shallowRef(markRaw(ComponentA));
const toggleComponent = () => {
currentComponent.value = currentComponent.value === ComponentA ? markRaw(ComponentB) : markRaw(ComponentA);
};
</script>
<!-- markRaw 方法用于将一个对象标记为 "原始",从而告诉 Vue 不需要将其转换为响应式对象。标记为 "原始" 的对象在响应式系统中不会被追踪更改,这可以帮助避免不必要的性能开销。
shallowRef 是用于创建一个浅的响应式引用的方法。与 ref 创建的响应式引用不同,shallowRef 不会对其内部对象进行深度观察,而只观察引用本身的变化。这意味着只有当引用本身发生变化时,才会触发更新,而不会递归观察引用内部对象的变化。
这两个方法通常用于特定场景下的性能优化。
在上述修改代码的例子中,我们使用 markRaw 将组件标记为非响应式的,避免了不必要的性能开销。而使用 shallowRef 创建浅的响应式引用,只观察引用本身的变化,而不观察组件内部的变化。这样可以保证在切换组件时,只有引用本身变化时才会触发组件的更新,提高了性能效率。 -->
到了这里,关于vue3 动态组件和异步组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!