Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3

Bagaimana untuk mengendalikan pengecualian dalam komponen dinamik Vue3? Artikel berikut akan membincangkan kaedah pengendalian pengecualian komponen dinamik Vue3 Saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video vuejs]

Komponen dinamik mempunyai dua senario biasa:

Pertama ialah penghalaan dinamik:

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

Yang kedua ialah komponen pemaparan dinamik, seperti menukar dalam Tab:

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

tidak akan menyebabkan sebarang masalah lain apabila digunakan dalam vue2, tetapi apabila anda membungkus komponen ke dalam objek responsif, dalam vue3, amaran akan muncul:

Vue diterima Komponen yang dijadikan objek reaktif Ini boleh membawa kepada prestasi yang tidak diperlukan dan harus dielakkan dengan menandakan komponen dengan markRaw atau menggunakan shallowRef dan bukannya ref.

Ini amaran muncul kerana: Menggunakan reaktif atau ref (pengisytiharan dalam fungsi data adalah sama) untuk mengisytiharkan pembolehubah akan digunakan sebagai proksi, dan komponen kami tidak mempunyai kegunaan lain selepas proksi untuk menjimatkan overhed prestasi, Vue mengesyorkan Kami menggunakan shallowRef atau markRaw untuk melangkau proksi proksi.

Penyelesaian adalah seperti yang dinyatakan di atas, anda perlu menggunakan shallowRef atau markRaw untuk pemprosesan:

Untuk pemprosesan Tab:

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

Untuk pemprosesan penghalaan dinamik:

import { markRaw } from 'vue'

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

Perbezaan antara shallowRef dan markRaw ialah shallowRef hanya akan bertindak balas kepada pengubahsuaian nilai, seperti:

const state = shallowRef({ count: 1 })

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

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

Dan markRaw menandakan objek sebagai Tidak boleh ditukar menjadi ejen. Objek itu sendiri kemudiannya dikembalikan.

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

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

Seperti yang anda lihat, objek yang diproses oleh markRaw bukan lagi objek responsif.

Untuk komponen, ia tidak sepatutnya menjadi objek responsif Semasa memproses, terdapat dua API, shallowRef dan markRaw adalah disyorkan untuk menggunakan markRaw untuk pemprosesan.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!