A brief analysis of how to handle exceptions in Vue3 dynamic components

How to handle exceptions in Vue3 dynamic components? The following article will talk about Vue3 dynamic component exception handling methods. I hope it will be helpful to everyone!

[Related recommendations: vuejs video tutorial]

There are two common scenarios for dynamic components:

The first is dynamic routing:

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

The second is dynamic rendering components, such as switching in Tabs:

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

will not cause any other problems when used in vue2, but when you wrap the component into a responsive object, in vue3, a warning will appear:

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

This warning appears because: Using reactive or ref (the same is true for declaration in the data function), declaring variables will act as a proxy, and our component has no other use after proxying , in order to save performance overhead, vue recommends that we use shallowRef or markRaw to skip the proxy proxy.

The solution is as mentioned above, you need to use shallowRef or markRaw for processing:

For Tabs processing:

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

For dynamic routing processing:

import { markRaw } from 'vue'

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

The difference between shallowRef and markRaw is that shallowRef will only respond to value modifications, such as:

const state = shallowRef({ count: 1 })

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

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

And markRaw marks an object as not being converted to a proxy. The object itself is then returned.

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

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

It can be seen that the object processed by markRaw is no longer a responsive object.

For a component, it should not be a responsive object. When processing, there are two APIs, shallowRef and markRaw. It is recommended to use markRaw for processing.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of A brief analysis of how to handle exceptions in Vue3 dynamic components. For more information, please follow other related articles on the PHP Chinese website!