vue3报错合集

1、使用el-table时报错： Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor ‘Object’ | property ‘vnode’ -> object with constructor ‘Object’— property ‘component’ closes the circle

原本只是想打印一下全部的数据……

错误代码：

正确代码：(代码中自定义的变量不能与el-table中的ref一致，否则会导致table不渲染)

2、子组件接收并修改父组件的值：Component emitted event “update:dialogAddVisible” but it is neither declared in the emits option nor as an “onUpdate:dialogAddVisible” prop

v-model需与update组合使用

父组件
<template>
	<add-user v-model:dialogAddVisible="dialogAddVisible" />
</template>
<script setup>
import AddUser from './addUser.vue'
import { ref, watch } from 'vue'
const dialogAddVisible = ref(false)
watch(dialogAddVisible, (val, old) => {
  dialogAddVisible.value = val
  console.log(dialogAddVisible.value)
})
</script>

子组件
<template>
<div v-model='isDialogAddVisible'></div>
</template>
<script setup>
import { reactive, defineProps, defineEmits, watch, ref, toRefs } from 'vue'
const props = defineProps({
  dialogAddVisible: {
    type: Boolean
  }
})
const refProps = toRefs(props)
const emits = defineEmits(['update:dialogAddVisible']) // 此处需写'update'，否则会报上方的警告
const isDialogAddVisible = ref(false)
watch(refProps.dialogAddVisible, (val, old) => {
  isDialogAddVisible.value = val
})
watch(isDialogAddVisible, (val, old) => {
  emits('update:dialogAddVisible', val) // 此处的update亦要写，否则会报也会报上方的警告
})
</script>

3. Failed to resolve component: router-view

忘记引入 router。main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4.子组件prop获取父组件的请求数据，获取到的数据为空

添加v-if。

<child-page
   v-if="userList.page"
    :commonPageList="userList.page"
  />

5.使用ELMessageBox时，打开弹窗，按下回车键会导致一直添加弹窗层

使用下列方式，打开图层后点击回车会导致一直添加弹窗的图层
ElMessageBox({
      title: '', // MessageBox 标题
      message: '确认启用此角色吗？', // MessageBox 消息正文内容
      confirmButtonText: '确定', // 确定按钮的文本内容
      cancelButtonText: '取消', // 取消按钮的文本内容
      showCancelButton: true, // 是否显示取消按钮
      closeOnClickModal: false, // 是否可通过点击遮罩关闭
      type: 'warning' // 消息类型，用于显示图标
    })
      .then(()=> {
      })
      .catch(err => {
        console.log(err)
      })

过于粗暴的方式

document.onkeydown = function (event) {
    return false
  }

可以换成ElMessageBox.confirm的方式

ElMessageBox.confirm(
      `确认删除${val ? val.username : '选中的'}用户吗？`,
      '删除用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        closeOnClickModal: false,
        type: 'warning'
      }
    )
      .then(() => {
      })
      .catch(err => {
        console.log(err)
      })

6. Catch all routes (“*”) must now be defined using a param with a custom regex

创建404页面时失败
失败代码：

{
    path: '/404',
    name: 'page-not-found',
    component: () => import('../views/pageNotFound.vue')
  },
{
    path: '*', // 此处的原因报错，应该用regexp的方式
    component: () => import('../views/pageNotFound.vue'),
  }

正确代码

{
    path: '/404', // /:pathMatch(.*)'
    name: 'page-not-found',
    component: () => import('../views/pageNotFound.vue')
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404',
  }

7.[vite] Internal server error: Undefined variable

创建的公共scss文件在main.js中引入，但是在其他vue文件中却不能获取到scss文件中的变量

app.vue中也引入过，但是依然报错。最后在vite.config.js中配置的
(但是不知为何引入的scss文件中设置的html,body margin和padding不生效……)

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "~style/basic.scss";'
    }
  }
}

8. Invalid watch source: 60 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types

官网：https://cn.vuejs.org/guide/essentials/watchers.html#basic-example

你不能直接侦听响应式对象的属性值，例如:
const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

9. v-html will override element children

template中使用v-html时报错：
需要删除掉标签里边的代码，即使只是注释

<span v-html="description">
	 <!-- {{ description }} -->
</span>

10 traneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

翻译：非道具属性(类)被传递给组件，但不能自动继承，因为组件呈现片段或文本根节点。
原因是用element-plus dialog组件时用了class属性，虽然最新的版本确实是用class字段的，但是项目使用的element-plus版本不是最新的，用的还是custom-class字段。遂把class改为custom-class即可

11 Unhandled error during execution of component event handler

翻译：在执行组件事件处理程序期间发生未处理的错误
原因之一是因为请求或者其他一些事件未进行catch的捕获，添加上catch就可以了

12 [vue warn]: inject() can only be used inside setup() or functional components.

翻译：Inject()只能在setup()或功能组件中使用
本来以为是inject使用的地方不对，后来发现是useRouter只能在setup()中使用，在js文件中使用router需要代码如下：

错误代码：
import { useRoute } from 'vue-router'
const route = useRoute()
正确的：
import  router  from '@/router'