Une brève analyse de la façon de gérer les exceptions dans les composants dynamiques Vue3

Comment gérer les exceptions dans les composants dynamiques Vue3 ? L'article suivant parlera des méthodes de gestion des exceptions des composants dynamiques Vue3. J'espère qu'il sera utile à tout le monde !

【Recommandation associée : tutoriel vidéo vuejs】

Il existe deux scénarios courants pour les composants dynamiques :

L'un est le routage dynamique :

// 动态路由
export const asyncRouterMap: Array<RouteRecordRaw> = [
  {
    path: &#39;/&#39;,
    name: &#39;index&#39;,
    meta: { title: &#39;首页&#39; },
    component: BasicLayout, // 引用了 BasicLayout 组件
    redirect: &#39;/welcome&#39;,
    children: [
      {
        path: &#39;welcome&#39;,
        name: &#39;Welcome&#39;,
        meta: { title: &#39;引导页&#39; },
        component: () => import(&#39;@/views/welcome.vue&#39;)
      },
      ...
    ]
  }
]

Le second concerne les composants de rendu dynamique, comme dans Changer d'onglets :

    <el-tabs :model-value="copyTabName" type="card">
      <template v-for="item in tabList" :key="item.key || item.name">
        <el-tab-pane
          :name="item.key"
          :label="item.name"
          :disabled="item.disabled"
          :lazy="item.lazy || true"
        >
          <template #label>
            <span>
              <component v-if="item.icon" :is="item.icon" />
              {{ item.name }}
            </span>
          </template>
          // 关键在这里
          <component :key="item.key || item.name" :is="item.component" v-bind="item.props" />
        </el-tab-pane>
      </template>
    </el-tabs>

L'utiliser dans vue2 ne posera aucun autre problème, mais lorsque vous enveloppez le composant dans un objet réactif, dans vue3, un avertissement apparaîtra :

Vue a reçu un composant qui a été créé un objet réactif. Cela peut entraîner une surcharge de performances inutile et doit être évité en marquant le composant avec markRaw or using shallowRef instead of ref.

Cet avertissement apparaît car : Utilisez reactive ou ref (la même chose est vraie pour la déclaration dans la fonction de données) Déclarer Les variables agiront comme un proxy, mais notre composant n'a aucune autre utilité après le proxy. Afin d'économiser sur les performances, Vue nous recommande d'utiliser ShallowRef ou markRaw pour ignorer le proxy.

La solution est comme mentionné ci-dessus, vous devez utiliser ShallowRef ou markRaw pour le traitement :

Pour le traitement des onglets :

import { markRaw, ref } from 'vue'

import A from './components/A.vue'
import B from './components/B.vue'

interface ComponentList {
  name: string
  component: Component
  // ...
}

const tab = ref<ComponentList[]>([{
    name: "组件 A",
    component: markRaw(A)
}, {
    name: "组件 B",
    component: markRaw(B)
}])

Pour le traitement de routage dynamique :

import { markRaw } from 'vue'

// 动态路由
export const asyncRouterMap: Array<RouteRecordRaw> = [
  {
    path: &#39;/&#39;,
    name: &#39;home&#39;,
    meta: { title: &#39;首页&#39; },
    component: markRaw(BasicLayout), // 使用 markRaw
    // ...
  }
]

Pour ShallowRef et MarkRaw, la différence entre les deux est que ShallowRef ne réagira qu'aux modifications de valeur, telles que :

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

Et markRaw marque un objet comme n'étant pas converti en proxy. L'objet lui-même est ensuite renvoyé.

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

Vous pouvez voir que l'objet traité par markRaw n'est plus un objet responsive.

Pour un composant, il ne doit pas être un objet responsive. Lors du traitement, il existe deux API,shallowRef et markRaw. Il est recommandé d'utiliser markRaw pour le traitement.

(Partage de vidéos d'apprentissage : développement web front-end, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!