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

青灯夜游
リリース: 2022-12-02 21:11:10
転載
2848 人が閲覧しました

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 &#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)
}])
ログイン後にコピー

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

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
    // ...
  }
]
ログイン後にコピー

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 サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート