Vue3 동적 구성 요소에서 예외를 처리하는 방법에 대한 간략한 분석

Vue3 동적 구성 요소에서 예외를 처리하는 방법은 무엇입니까? 다음 기사에서는 Vue3 동적 구성 요소 예외 처리 방법에 대해 설명합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

【관련 권장 사항: vuejs 비디오 튜토리얼】

동적 구성 요소에 대한 두 가지 일반적인 시나리오가 있습니다.

하나는 동적 라우팅입니다.

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

두 번째는 동적 렌더링 구성 요소입니다. 예를 들어 탭 전환:

    <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 or using shallowRef instead of ref.

을 표시하여 피해야 합니다. 이 경고는 다음과 같은 이유로 나타납니다. Reactive 또는 ref를 사용합니다(데이터 함수의 선언에서도 마찬가지입니다). 변수는 프록시 역할을 하며 우리 구성 요소는 프록시 이후에는 다른 용도로 사용되지 않습니다. 성능 오버헤드를 절약하기 위해 Vue에서는 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라는 두 가지 API를 사용하는 것이 좋습니다.

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 Vue3 동적 구성 요소에서 예외를 처리하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!