Vue3 - 解决报错警告 [Vue warn]: Unhandled error during execution of component event handler，vue3组件问题

报错解释：

这个警告是Vue 3中的一个错误处理机制。当组件的生命周期钩子或者事件处理函数中发生了错误，但是这个错误没有被捕获和处理时，Vue会发出这个警告。这个警告并不会直接导致程序崩溃，但是它表明了可能存在的问题，应当被关注和修复。

解决方法：

1. 检查错误：查看控制台中错误的详细信息，确定错误的来源。

2. 错误处理：在组件中添加errorCaptured或者全局错误处理器来捕获和处理错误。

   • 使用errorCaptured钩子：

     
     
     
     app.component('my-component', {
       errorCaptured(err, vm, info) {
         // 处理错误，比如记录日志，返回一个值代表是否捕获成功
         console.error(`捕获到错误：${err.toString()}\n信息：${info}`);
         return false;
       }
     });

   • 添加全局错误处理器：

     
     
     
     app.config.errorHandler = function(err, vm, info) {
       // 处理错误，比如记录日志
       console.error(`捕获到错误：${err.toString()}\n信息：${info}`);
     };
      
     app.config.warnHandler = function(msg, vm, trace) {
       // 处理警告，比如记录日志
       console.warn(`捕获到警告：${msg}\n组件：${vm}\n堆栈：${trace}`);
     };

3. 测试：修复错误后，重新运行程序，确保警告不再出现。

确保在生产环境中有全面的错误日志记录和错误处理机制，以便能够快速发现和修复问题。