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: {}
})

2、Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
xxx/src/utils/index.js:108:57
106|          {html}
107|          <el-popover placement={tipPlaceMent} width={questionTextWidth} trigger='hover' content='.'>
108|            <span domPropsInnerHTML={questionText}></span>
   |                                                          ^
109|            <i slot='reference' class='el-icon-question' style='cursor:pointer'></i>
110|          </el-popover>
    at TransformPluginContext._formatError (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49748:41)
    at TransformPluginContext.error (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49743:16)
    at TransformPluginContext.transform (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:64285:14)
    at async PluginContainer.transform (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49589:18)
    at async loadAndTransform (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:52411:27)
    at async viteTransformMiddleware (xxx/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:62175:24
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

如果直接在js下写jsx，会报此错。解决办法如下：

• 如果为js文件，可将js文件后缀改为.jsx
• 如果为vue文件下script标签下写jsx，可改为<script lang="jsx">
• 通过vite-plugin-lang-jsx，具体配置可参考官方文档

3、路由：Uncaught (in promise) TypeError: c is not a function at Proxy.render (db2.js:178:45)

在vue2中，路由文件多处用到了

component: { render(c) { return c('router-view') } },

其作用为：

This allows you to create a route that serves as a container for nested routes. The router-view inside this component will be replaced with the component matched by the nested child routes.

vue3中由于API变更，会报错Uncaught (in promise) TypeError: c is not a function at Proxy.render。在3版本下，写法变更为：

import { h, resolveComponent } from 'vue'
component: { render: () => h(resolveComponent('router-view')) },

4、路由，mixins下beforeRouteLeave、beforeRouteEnter不触发

升级Vue3及vue-router4后，定义于混入下的beforeRouteLeave、beforeRouteEnter不被触发，而组件内可以。github的issue下提供了该问题的讨论，几年过去，也仅是大家提供的workround，并没有官方实际解决这个问题。参考:Component guards not working when defined on mixins #454