Maison > interface Web > Voir.js > le corps du texte

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

青灯夜游
Libérer: 2022-12-02 21:11:10
avant
2829 Les gens l'ont consulté

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 !

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

【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;)
      },
      ...
    ]
  }
]
Copier après la connexion

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>
Copier après la connexion

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 &#39;vue&#39;

import A from &#39;./components/A.vue&#39;
import B from &#39;./components/B.vue&#39;

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

const tab = ref<ComponentList[]>([{
    name: "组件 A",
    component: markRaw(A)
}, {
    name: "组件 B",
    component: markRaw(B)
}])
Copier après la connexion

Pour le traitement de routage dynamique :

import { markRaw } from &#39;vue&#39;

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

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 }
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal