Vue 错误没有意义：执行调度程序刷新期间出现未处理的错误。 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<null >>

Posted 2023-02-23

【中文标题】Vue 错误没有意义：执行调度程序刷新期间出现未处理的错误。 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<null >>

【英文标题】：Vue error makes no sense: Unhandled error during execution of scheduler flush. onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >

【发布时间】：2021-05-29 08:30:26

【问题描述】：

我认为这个问题源于一个父模板在Vue.js 3 和Vue Router 4 中有多个子模板。在这两个软件包的早期版本中，我从来没有遇到过这个问题。

我有一个简单的App.vue 文件：

<template>
    <div id="app">
         <main id="content">
                    <div id="nav">
                        <!--<router-link to="/about">About</router-link>-->
                        <router-link to="/information">Information</router-link>
                        <router-link :to=" path: '/create', name: 'PostCreate'">Create</router-link>
                    </div>
                    <router-view></router-view>
         </main>
</template>

router-link to="/information" 链接工作正常。它只是加载其中没有其他组件的视图。

另一个router-link :to=" path: '/create', name: 'PostCreate'" 在反复尝试加载组件大约 50 次后失败并将其记录在控制台中：

 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <PostCreate> 
  at <PostCreate>  
  at <PostCreate>  
  ... // repeats over and over again until
  at <PostCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> 
  at <App>

vuerouter.js

const routes = [
    
        path: '/',
        name: 'HomeView',
        component: HomeView
    ,
    
        path: '/information',
        name: 'Information',
        component: () => import(/* webpackChunkName: "Information" */ '../views/information/Information.vue')
    
    ,
    
        path: '/create',
        name: 'PostCreate',
        component: () => import(/* webpackChunkName: "Create" */ '../views/posts/PostCreate.vue')
    
];

Information.vue 和PostCreate.vue 之间的唯一区别是后者导入另一个vue 组件来制作form 供用户创建帖子。

Information.vue

<template>
<div>
<p>I am full of good info</p>
</div>
</template>
<script>
    export default 
        name: 'Information'
    
</script>

PostCreate.vue

<template>
    <div class="content">

            <h1>I make a form</h1>
            <Post-Create></Post-Create>

    </div>
</template>

<script>
    import PostCreate from "../../components/PostCreate.vue";

    export default 
        name: "PostCreate",
        components: 
            "Post-Create": PostCreate
        
    
</script>

为什么在带有 Vue-Router 4 的 Vue.js 3 中这是一个问题，而之前它运行良好？我该如何解决？

【问题讨论】：

根据错误，“this is a Vue internals bug.”。您应该在给定的 URL（恕我直言）上打开一个新问题

【参考方案1】：

这是因为PostCreate 视图试图递归地加载自身。由于您为视图和子组件使用了相同的名称，因此父名称会覆盖注册中的子名称，并且视图会尝试加载自己而不是子组件。

与此等价，这也会导致视图尝试自行加载。

<template>
  <div class="content">
    <h1>I make a form</h1>
    <PostCreate></PostCreate>
  </div>
</template>

<script>
export default 
  name: "PostCreate",
;
</script>

^{你不会得到Failed to resolve component 错误，因为它需要&lt;PostCreate&gt;&lt;/PostCreate&gt; 本身。你会得到同样的递归错误。}

所以你只需要重命名子组件。对于不同的组件，尤其是在大型项目中，始终使用不同的文件名也是一个很好的做法，以保持文件清晰。

【讨论】：

谢谢你。文档中的任何地方都提到了这一点吗？这通常是在 Vue 中进行的模糊调试吗？有没有更好的调试方法

@volumeone 不客气。我认为我从未在命名docs 中明确提到过它。这也有点不直观，你是对的，但我认为这是一个相当罕见的情况，调试通常更简单