vue3 动态组件和异步组件

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>组件强制被切换掉的组件仍然保持“存活”的状态。

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 创建浅的响应式引用，只观察引用本身的变化，而不观察组件内部的变化。这样可以保证在切换组件时，只有引用本身变化时才会触发组件的更新，提高了性能效率。 -->