Eine kurze Analyse zum Umgang mit Ausnahmen in dynamischen Vue3-Komponenten

Wie gehe ich mit Ausnahmen in dynamischen Vue3-Komponenten um? Im folgenden Artikel geht es um die Ausnahmebehandlungsmethoden für dynamische Vue3-Komponenten. Ich hoffe, dass er für alle hilfreich ist. 🔜 , B. beim Wechseln in Tabs:

// 动态路由
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;)
      },
      ...
    ]
  }
]

Die Verwendung in vue2 verursacht keine weiteren Probleme, aber wenn Sie die Komponente in ein reaktionsfähiges Objekt einbinden, wird in vue3 eine Warnung angezeigt:

Vue hat eine Komponente erhalten, die war ein reaktives Objekt erstellt. Dies kann zu unnötigem Leistungsaufwand führen und sollte vermieden werden, indem die Komponente mit markiert wird Variablen fungieren als Proxy, aber unsere Komponente hat nach dem Proxying keine andere Verwendung. Um Leistungsaufwand zu sparen, empfiehlt Vue, den Proxy zu verwenden.

Die Lösung ist wie oben erwähnt, Sie müssen für die Verarbeitung flachRef oder markRaw verwenden: Für die Tabs-Verarbeitung:

    <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>

Für die dynamische Routing-Verarbeitung:

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)
}])

Für flachRef und markRaw besteht der Unterschied zwischen den beiden darin, dass flachRef Reagiert nur auf Wertänderungen, wie zum Beispiel:

import { markRaw } from 'vue'

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

Und markRaw markiert ein Objekt als nicht in einen Proxy konvertiert. Das Objekt selbst wird dann zurückgegeben.

const state = shallowRef({ count: 1 })

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

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

Sie können sehen, dass das von markRaw verarbeitete Objekt kein responsives Objekt mehr ist.

Für eine Komponente sollte es sich nicht um ein reaktionsfähiges Objekt handeln. Bei der Verarbeitung wird empfohlen, markRaw für die Verarbeitung zu verwenden.

(Teilen von Lernvideos:

Web-Frontend-Entwicklung, markRaw or using shallowRef instead of refEinfaches Programmiervideo)

Das obige ist der detaillierte Inhalt vonEine kurze Analyse zum Umgang mit Ausnahmen in dynamischen Vue3-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!