淺析Vue3動態組件怎麼進行異常處理-Vue.js-PHP中文網

淺析Vue3動態組件怎麼進行異常處理

青灯夜游

發布： 2022-12-02 21:11:10

轉載

2848 人瀏覽過

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;)
      },
      ...
    ]
  }
]

登入後複製

二是動態渲染元件，例如在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>

登入後複製

在vue2 中使用並不會引發什麼其他的問題，但是當你將元件包裝成一個響應式物件時，在vue3 中，會出現一個警告：

##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#. #.出現這個警告是因為：使用reactive 或ref（在data 函數中宣告也是一樣的）宣告變數會做proxy 代理，而我們元件代理之後並沒有其他用處，為了節省效能開銷，vue 推薦我們使用shallowRef 或markRaw 跳過proxy 代理程式。

解決方法如上所說，需要使用shallowRef 或markRaw 進行處理：對於Tabs 的處理：

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，2 者的差異在於 shallowRef 只會對value 的修改做出反應，例如：

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中文網其他相關文章！