vue3升级错误汇总

1、Vue received a Component that was made a reactive object

index.vue:13 [Vue warn]: Vue received a Component that 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`. 
Component that was made reactive:  {name: 'Topological', components: {…}, mixins: Array(1), props: {…}, data: ƒ, …} 
  at <ElTabPane key=1 label="拓扑图" name="topological" > 
  at <ElTabs modelValue="topological" onUpdate:modelValue=fn class="tab-level--first"  ... > 
  at <OpenGaussOverview onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {contentDisplay: ƒ, formatFloat: ƒ, longStringEllipsis: ƒ, formatB: ƒ, formatKB: ƒ, …} > > 
  at <KeepAlive key=0 max=5 > 
  at <RouterView key="/opengauss/overview?dbsId=858" > 
  at <AppMain> 
  at <Layout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {contentDisplay: ƒ, formatFloat: ƒ, longStringEllipsis: ƒ, formatB: ƒ, formatKB: ƒ, …} > > 
  at <RouterView> 
  at <App>

报错位置

<template>
    <el-tabs v-model="activeName" >
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component :is="item.component" v-if="activeName === item.name" />
      </el-tab-pane>
    </el-tabs>
</template>
<script>
...
  data() {
    return {
      tabList: [
        { label: '123', name: 'test1', component: test1Component },
        { label: '234', name: 'test2', component: test2Component }
      ]
    }
  },

tabList定义于data使其可响应没有意义。echarts的使用也同样容易出问题，echarts初始化后会于不同位置进行clear、dispose、setOption等处理，因此对象被定义于data，从而被赋予了响应式特性，但这同样是不必要的

报错解决

在vue官网，有这样一段话，介绍了markRaw的使用

markRaw() and shallow APIs such as shallowReactive() allow you to selectively opt-out of the default deep reactive/readonly conversion and embed raw, non-proxied objects in your state graph. They can be used for various reasons:
Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.
Skipping proxy conversion can provide performance improvements when rendering large lists with immutable data sources.

仅需使用markRaw包裹无需进行响应式处理的对象，即可解决

import { markRaw } from 'vue'
const foo = markRaw({
  nested: {}
})