Vue3 動的コンポーネントで例外を処理する方法の簡単な分析

Vue3 動的コンポーネントで例外を処理するにはどうすればよいですか?次の記事では、Vue3 の動的コンポーネントの例外処理方法について説明します。

[関連する推奨事項: vuejs ビデオ チュートリアル ]

動的コンポーネントには 2 つの一般的なシナリオがあります。

1 つ目は動的ルーティングです:

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

2 つ目は、タブでの切り替えなどの動的レンダリング コンポーネントです:

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

を vue2 で使用しても他の問題は発生しませんが、コンポーネントを応答オブジェクトにラップすると、vue3 では次の警告が表示されます:

Vue はコンポーネントを受け取りましたこれは不必要なパフォーマンスのオーバーヘッドを引き起こす可能性があるため、コンポーネントを markRaw でマークするか、ref## の代わりに shallowRef を使用することで回避する必要があります。

この警告は次の理由で発生します:

reactive または ref (データ関数での宣言にも同じことが当てはまります) を使用すると、変数の宣言がプロキシとして機能し、コンポーネントはその後他の用途を持たなくなります。 proxying では、パフォーマンスのオーバーヘッドを節約するために、shallowRef または markRaw を使用してプロキシ プロキシをスキップすることをお勧めします。

解決策は上記の通りです。処理にはshallowRefまたはmarkRawを使用する必要があります:

タブ処理の場合:

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

動的ルーティング処理の場合:

import { markRaw } from 'vue'

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

shallowRef と markRaw の違いは、shallowRef は次のような値の変更にのみ応答することです。

const state = shallowRef({ count: 1 })

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

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

そして、markRaw はオブジェクトをプロキシに変換されていないものとしてマークします。その後、オブジェクト自体が返されます。

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

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

markRaw によって処理されたオブジェクトが応答オブジェクトではなくなっていることがわかります。

コンポーネントの場合、応答性の高いオブジェクトであってはなりません。処理時には、shallowRef と markRaw の 2 つの API が存在します。処理には markRaw を使用することをお勧めします。

(学習ビデオ共有:

Web フロントエンド開発、基本プログラミング ビデオ)

以上がVue3 動的コンポーネントで例外を処理する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。