Vue中Uncaught runtime errors错误提示的解决方案‌

概述：什么是 Uncaught Runtime Errors
常见的运行时错误类型与原因
- 2.1. 模板中访问未定义的属性
- 2.2. 方法/计算属性返回值错误
- 2.3. 组件生命周期中异步操作未捕获异常
- 2.4. 引用（ref）或状态管理未初始化
调试思路与工具介绍
- 3.1. 浏览器控制台与 Source Map
- 3.2. Vue DevTools 的使用
解决方案一：检查并修复模板语法错误
- 4.1. 访问未定义的 data/props
- 4.2. 在 v-for、v-if 等指令中的注意点
- 4.3. 图解：模板渲染流程中的错误发生点
解决方案二：在组件内使用 errorCaptured 钩子捕获子组件错误
- 5.1. errorCaptured 的作用与使用方法
- 5.2. 示例：父组件捕获子组件错误并显示提示
解决方案三：全局错误处理（config.errorHandler）
- 6.1. 在主入口 main.js 中配置全局捕获
- 6.2. 示例：将错误上报到服务端或 Logger
方案四：异步操作中的错误捕获（try…catch、Promise 错误处理）
- 7.1. async/await 常见漏写 try…catch
- 7.2. Promise.then/catch 未链式处理
- 7.3. 示例：封装一个通用请求函数并全局捕获
方案五：第三方库与插件的注意事项
- 8.1. Vue Router 异步路由钩子中的错误
- 8.2. Vuex Action 中的错误
- 8.3. 图解：插件调用链条中的异常流向
小结与最佳实践

1. 概述：什么是 Uncaught Runtime Errors

Uncaught runtime errors（未捕获的运行时错误）指的是在页面渲染或代码执行过程中发生的异常，且未被任何错误处理逻辑捕获，最终抛到浏览器控制台并导致页面交互中断或部分功能失效。

在 Vue 应用中，运行时错误通常来自于：
1. 模板里访问了 undefined 或 null 的属性；
2. 生命周期钩子中执行异步操作未加错误捕获；
3. 组件间传参/事件通信出错；
4. Vue 插件或第三方库中未正确处理异常。

为什么要关注运行时错误？

用户体验：一旦出现未捕获错误，组件渲染或交互会中断，UI 显示可能崩塌。
业务稳定：错误没被记录，会导致难以排查线上问题。
可维护性：及时捕获并处理异常，有助于快速定位 BUG。

2. 常见的运行时错误类型与原因

下面列举几种典型场景，并配以示例说明其成因。

2.1. 模板中访问未定义的属性

<template>
  <div>{{ user.name }}</div> <!-- 假设 `user` 数据没有初始化 -->
</template>

<script>
export default {
  data() {
    return {
      // user: { name: 'Alice' }  // 忘记初始化
    }
  }
}
</script>

错误提示：

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
Uncaught (in promise) TypeError: Cannot read property 'name' of undefined

原因：user 本应是一个对象，但在 data() 中未初始化，导致模板里直接访问 user.name 时抛出 undefined 访问错误。

2.2. 方法/计算属性返回值错误

<template>
  <div>{{ reversedText }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: null, // 但在计算属性中直接调用 text.length，会报错
    }
  },
  computed: {
    reversedText() {
      // 当 this.text 为 null 或 undefined 时，会抛出错误
      return this.text.split('').reverse().join('');
    }
  }
}
</script>

错误提示：

Uncaught TypeError: Cannot read property 'split' of null
    at Proxy.reversedText (App.vue:11)

原因：计算属性直接对 null 或 undefined 调用字符串方法，没有做空值校验。

2.3. 组件生命周期中异步操作未捕获异常

<script>
export default {
  async mounted() {
    // 假设 fetchUser 是一个抛出异常的接口调用
    const data = await fetchUser(); // 若接口返回 500，会抛出异常，但没有 try/catch
    this.userInfo = data;
  }
}
</script>

错误提示：

Uncaught (in promise) Error: Request failed with status code 500

原因：await fetchUser() 抛出的错误未被 try…catch 捕获，也没有在 Promise 链上加 .catch，因此变成了未捕获的 Promise 异常。

2.4. 引用（`ref`）或状态管理未初始化

<template>
  <input ref="usernameInput" />
  <button @click="focusInput">Focus</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 若在渲染之前就调用，this.$refs.usernameInput 可能为 undefined
      this.$refs.usernameInput.focus();
    }
  }
}
</script>

错误提示：

Uncaught TypeError: Cannot read property 'focus' of undefined

原因：使用 $refs 时，必须保证元素已经渲染完成，或者需要在 nextTick 中调用；否则 $refs.usernameInput 可能为 undefined。

3. 调试思路与工具介绍

在解决 Uncaught runtime errors 之前，需要先掌握一些基本的调试手段。

3.1. 浏览器控制台与 Source Map

控制台（Console）：出现运行时错误时，浏览器会输出堆栈（Stack Trace），其中会显示出错文件、行号以及调用栈信息。
Source Map：在开发环境下，一般会启用 Source Map，将编译后的代码映射回源代码。打开 Chrome DevTools → “Sources” 面板，能定位到 .vue 源文件的具体错误行。

图示：浏览器 Console 查看错误堆栈（示意图）

+-------------------------------------------+
| Console                                   |
|-------------------------------------------|
| Uncaught TypeError: Cannot read property  |
|     'name' of undefined                   | ← 错误类型与描述
|     at render (App.vue:12)                | ← 出错文件与行号
|     at VueComponent.Vue._render (vue.js:..)|
|     ...                                   |
+-------------------------------------------+

3.2. Vue DevTools 的使用

在 Chrome/Firefox 等浏览器中安装 Vue DevTools，可以直观地看到组件树、数据状态（data/props/computed）、事件调用。
当页面报错时，可通过 DevTools 中的 “Components” 面板，查看当前组件的 data、props 是否正常，快速定位是哪个属性为空或类型不对。

4. 解决方案一：检查并修复模板语法错误

模板渲染阶段的错误最常见，多数源自访问了空值或未定义属性。以下分几种情况详细说明。

4.1. 访问未定义的 `data`/`props`

示例 1：`data` 未初始化

<template>
  <div>{{ user.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      // user: { name: 'Alice' }  // 若忘记初始化，会导致运行时报错
    }
  }
}
</script>

解决方法：

初始化默认值：在 data() 中给 user 一个默认对象：

data() {
  return {
    user: {
      name: '',
      age: null,
      // ……
    }
  }
}

模板中增加空值判断：使用可选链（Vue 3+）或三元运算简化判断：

<!-- Vue 3 可选链写法 -->
<div>{{ user?.name }}</div>

<!-- 或三元运算 -->
<div>{{ user && user.name ? user.name : '加载中...' }}</div>

示例 2：`props` 类型不匹配或必填未传

<!-- ParentComponent.vue -->
<template>
  <!-- 忘记传递 requiredProps -->
  <ChildComponent />
</template>

<!-- ChildComponent.vue -->
<template>
  <p>{{ requiredProps.title }}</p>
</template>

<script>
export default {
  props: {
    requiredProps: {
      type: Object,
      required: true
    }
  }
}
</script>

错误提示：

[Vue warn]: Missing required prop: "requiredProps"
Uncaught TypeError: Cannot read property 'title' of undefined

解决方法：

传参：保证父组件使用 <ChildComponent :requiredProps="{ title: 'Hello' }" />。

非必填并设置默认值：

props: {
  requiredProps: {
    type: Object,
    default: () => ({ title: '默认标题' })
  }
}

4.2. 在 `v-for`、`v-if` 等指令中的注意点

v-for 迭代时，若数组为 undefined，也会报错。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // items: []  // 如果这里忘写，items 为 undefined，就会报错
    }
  }
}
</script>

解决：初始化 items: []。

v-if 与模板变量配合使用时，推荐先判断再渲染：

<template>
  <!-- 只有当 items 存在时才遍历 -->
  <ul v-if="items && items.length">
    <li v-for="(item, idx) in items" :key="idx">{{ item.name }}</li>
  </ul>
  <p v-else>暂无数据</p>
</template>

4.3. 图解：模板渲染流程中的错误发生点

下面给出一个简化的“模板渲染—错误抛出”流程示意图，帮助你更直观地理解 Vue 在渲染时报错的位置。

+------------------------------------------+
|   Vue 渲染流程（简化）                   |
+------------------------------------------+
| 1. 模板编译阶段：将 <template> 编译成 render 函数  |
|   └─> 若语法不合法（如未闭合标签）则编译时报错      |
|                                          |
| 2. Virtual DOM 创建：执行 render 函数，生成 VNode  |
|   └─> render 中访问了 this.xxx，但 xxx 为 undefined |
|       → 抛出 TypeError 并被 Vue 封装成运行时错误        |
|                                          |
| 3. DOM 更新：将 VNode 映射到真实 DOM    |
|   └─> 如果第 2 步存在异常，就不会执行到此步         |
|                                          |
+------------------------------------------+

通过上述图解可见，当你在模板或 render 函数中访问了不存在的属性，就会在“Virtual DOM 创建”这一步骤抛出运行时错误。

5. 解决方案二：在组件内使用 `errorCaptured` 钩子捕获子组件错误

Vue 提供了 errorCaptured 钩子，允许父组件捕获其子组件抛出的错误并进行处理，而不会让错误直接冒泡到全局。

5.1. `errorCaptured` 的作用与使用方法

触发时机：当某个子组件或其后代组件在渲染、生命周期钩子、事件回调中抛出错误，父链上某个组件的 errorCaptured(err, vm, info) 会被调用。
返回值：若返回 false，则停止错误向上继续传播；否则继续向上冒泡到更高层或全局。

export default {
  name: 'ParentComponent',
  errorCaptured(err, vm, info) {
    // err: 原始错误对象
    // vm: 发生错误的组件实例
    // info: 错误所在的生命周期钩子或阶段描述（如 "render"）
    console.error('捕获到子组件错误：', err, '组件：', vm, '阶段：', info);
    // 返回 false，阻止该错误继续往上冒泡
    return false;
  }
}

5.2. 示例：父组件捕获子组件错误并显示提示

Step 1：子组件故意抛错

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: null
    }
  },
  mounted() {
    // 故意抛出一个运行时错误
    throw new Error('ChildComponent 挂载后出错！');
  }
}
</script>

Step 2：父组件使用 `errorCaptured` 捕获

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <h2>父组件区域</h2>
    <!-- 当子组件抛错时，父组件的 errorCaptured 会被调用 -->
    <ChildComponent />
    <p v-if="hasError" class="error-notice">
      子组件加载失败，请稍后重试。
    </p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      hasError: false,
    };
  },
  errorCaptured(err, vm, info) {
    console.error('父组件捕获到子组件错误：', err.message);
    this.hasError = true;
    // 返回 false 阻止错误继续向上传播到全局
    return false;
  }
}
</script>

<style scoped>
.error-notice {
  color: red;
  font-weight: bold;
}
</style>

效果说明：当 ChildComponent 在 mounted 钩子中抛出 Error 时，父组件的 errorCaptured 会捕获到该异常，设置 hasError=true 并显示友好提示“子组件加载失败，请稍后重试”。同时由于返回 false，错误不会继续冒泡到全局，也不会使整个页面崩塌。

6. 解决方案三：全局错误处理（`config.errorHandler`）

对于全局未捕获的运行时错误，Vue 提供了配置项 app.config.errorHandler（在 Vue 2 中是 Vue.config.errorHandler），可以在应用级别捕获并统一处理。

6.1. 在主入口 `main.js` 中配置全局捕获

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

const app = createApp(App);

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  // err: 错误对象
  // vm: 发生错误的组件实例
  // info: 错误发生时的钩子位置，如 'render function'、'setup'
  console.error('【全局 ErrorHandler】错误：', err);
  console.error('组件：', vm);
  console.error('信息：', info);

  // 这里可以做一些统一处理：
  // 1. 展示全局错误提示（如 Toast）
  // 2. 上报到日志收集服务（如 Sentry、LogRocket）
  // 3. 重定向到错误页面
};

app.mount('#app');

6.2. 示例：将错误上报到服务端或 Logger

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios'; // 用于上报日志

const app = createApp(App);

app.config.errorHandler = async (err, vm, info) => {
  console.error('全局捕获到异常：', err, '组件：', vm, '阶段：', info);

  // 准备上报的数据
  const errorPayload = {
    message: err.message,
    stack: err.stack,
    component: vm.$options.name || vm.$options._componentTag || '匿名组件',
    info,
    url: window.location.href,
    timestamp: new Date().toISOString(),
  };

  try {
    // 发送到后端日志收集接口
    await axios.post('/api/logs/vue-error', errorPayload);
  } catch (reportErr) {
    console.warn('错误上报失败：', reportErr);
  }

  // 用一个简单的全局提示框通知用户
  // 比如：调用全局状态管理，显示一个全局的 Toast 组件
  // store.commit('showErrorToast', '系统繁忙，请稍后重试');
};

app.mount('#app');

注意：
在 config.errorHandler 中务必要捕获上报过程中的异常，避免再次抛出未捕获错误。
config.errorHandler 只捕获渲染函数、生命周期钩子、事件回调里的异常，不包括异步 Promise（如果未在组件内使用 errorCaptured、try…catch）。

7. 方案四：异步操作中的错误捕获（`try…catch`、Promise 错误处理）

前端项目中大量场景会调用异步接口（fetch、axios、第三方 SDK 等），若不对 Promise 进行链式 .catch 或 async/await 配对 try…catch，就会产生未捕获的 Promise 异常。

7.1. `async/await` 常见漏写 `try…catch`

<script>
import { fetchData } from '@/api';

export default {
  async mounted() {
    // 若接口请求失败，会抛出异常到全局，导致 Uncaught (in promise)
    const res = await fetchData();
    this.data = res.data;
  }
}
</script>

**解决方法：**在 async 函数中使用 try…catch 包裹易出错的调用：

<script>
import { fetchData } from '@/api';

export default {
  data() {
    return {
      data: null,
      isLoading: false,
      errorMsg: ''
    }
  },
  async mounted() {
    this.isLoading = true;
    try {
      const res = await fetchData();
      this.data = res.data;
    } catch (err) {
      console.error('接口请求失败：', err);
      this.errorMsg = '数据加载失败，请刷新重试';
    } finally {
      this.isLoading = false;
    }
  }
}
</script>

<template>
  <div>
    <div v-if="isLoading">加载中...</div>
    <div v-else-if="errorMsg" class="error">{{ errorMsg }}</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

7.2. `Promise.then/catch` 未链式处理

// 错误写法：then 中抛出的异常没有被 catch 到
fetchData()
  .then(res => {
    if (res.code !== 0) {
      throw new Error('接口返回业务异常');
    }
    return res.data;
  })
  .then(data => {
    this.data = data;
  });
// 没有 .catch，导致未捕获异常

修正：

fetchData()
  .then(res => {
    if (res.code !== 0) {
      throw new Error('接口返回业务异常');
    }
    return res.data;
  })
  .then(data => {
    this.data = data;
  })
  .catch(err => {
    console.error('Promise 链异常：', err);
    this.errorMsg = '请求失败';
  });

7.3. 示例：封装一个通用请求函数并全局捕获

假设项目中所有接口都通过 request.js 进行封装，以便统一处理请求、拦截器和错误。

// src/utils/request.js
import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
  baseURL: '/api',
  timeout: 10000
});

// 请求拦截器：可加 token、loading 等
instance.interceptors.request.use(config => {
  // ...省略 token 注入
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器：统一处理业务错误码
instance.interceptors.response.use(
  response => {
    if (response.data.code !== 0) {
      // 业务层面异常
      return Promise.reject(new Error(response.data.message || '未知错误'));
    }
    return response.data;
  },
  error => {
    // 网络或服务器异常
    return Promise.reject(error);
  }
);

export default instance;

在组件中使用时：

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      list: [],
      loading: false,
      errMsg: '',
    };
  },
  async created() {
    this.loading = true;
    try {
      const data = await request.get('/items'); // axios 返回 data 已是 res.data
      this.list = data.items;
    } catch (err) {
      console.error('统一请求异常：', err.message);
      this.errMsg = err.message || '请求失败';
    } finally {
      this.loading = false;
    }
  }
}
</script>

要点：
在 interceptors.response 中将非 0 业务码都视作错误并 Promise.reject，让调用方统一在 .catch 或 try…catch 中处理；
组件内无论是 async/await 还是 .then/catch，都要保证对可能抛出异常的 Promise 进行捕获。

8. 方案五：第三方库与插件的注意事项

在 Vue 项目中，常会引入 Router、Vuex、Element-UI、第三方图表库等。如果它们调用链条中出现异常，也会导致 Uncaught runtime errors。以下分别进行说明和示例。

8.1. Vue Router 异步路由钩子中的错误

如果在路由守卫或异步组件加载时出现异常，需要在相应钩子里捕获，否则会在控制台报错并中断导航。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/User.vue'),
    beforeEnter: async (to, from, next) => {
      try {
        const exists = await checkUserExists(to.params.id);
        if (!exists) {
          return next('/not-found');
        }
        next();
      } catch (err) {
        console.error('用户校验失败：', err);
        next('/error'); // 导航到错误页面
      }
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

注意：
beforeEach、beforeEnter、beforeRouteEnter 等守卫里，若有异步操作，一定要加 try…catch 或在返回的 Promise 上加 .catch，否则会出现未捕获的 Promise 错误。
异步组件加载（component: () => import('…')）也可能因为文件找不到或网络异常而抛错，可在顶层 router.onError 中统一捕获：

router.onError(err => {
  console.error('路由加载错误：', err);
  // 比如重定向到一个通用的加载失败页面
  router.replace('/error');
});

8.2. Vuex Action 中的错误

如果在 Vuex 的 Action 里执行异步请求或一些逻辑时抛错，且组件调用时未捕获，则同样会成为 Uncaught 错误。

// store/index.js
import { createStore } from 'vuex';
import api from '@/api';

export default createStore({
  state: { user: null },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async fetchUser({ commit }, userId) {
      // 若接口调用抛错，没有 try/catch，就会上升到调用该 action 的组件
      const res = await api.getUser(userId);
      commit('setUser', res.data);
    }
  }
});

组件调用示例：

<script>
import { mapActions } from 'vuex';
export default {
  created() {
    // 如果不加 catch，这里会有 Uncaught (in promise)
    this.fetchUser(this.$route.params.id);
  },
  methods: {
    ...mapActions(['fetchUser'])
  }
}
</script>

解决：

<script>
import { mapActions } from 'vuex';
export default {
  async created() {
    try {
      await this.fetchUser(this.$route.params.id);
    } catch (err) {
      console.error('获取用户失败：', err);
      // 做一些降级处理，如提示或跳转
    }
  },
  methods: {
    ...mapActions(['fetchUser'])
  }
}
</script>

8.3. 图解：插件调用链条中的异常流向

下面以“组件→Vuex Action→API 请求→Promise 抛错”这种常见场景，画出简化的调用与异常传播流程图，帮助你快速判断在哪个环节需要手动捕获。

+---------------------------------------------------------+
|                     组件 (Component)                     |
|  created()                                              |
|    ↓  调用 this.$store.dispatch('fetchUser', id)         |
+---------------------------------------------------------+
                           |
                           ↓
+---------------------------------------------------------+
|                Vuex Action：fetchUser                   |
|  async fetchUser(...) {                                  |
|    const res = await api.getUser(id);  <-- 可能抛错       |
|    commit('setUser', res.data);                         |
|  }                                                      |
+---------------------------------------------------------+
                           |
                           ↓
+---------------------------------------------------------+
|          API 请求（axios、fetch 等封装层）                 |
|  return axios.get(`/user/${id}`)                         |
|    ↳ 如果 404/500，会 reject(error)                      |
+---------------------------------------------------------+

若 “API 请求” 抛出异常，则会沿着箭头向上冒泡：
- 如果在 Vuex Action 内未用 try…catch，那么 dispatch('fetchUser') 返回的 Promise 会以 reject 方式结束；
- 如果组件 await this.fetchUser() 未捕获，也会变成未捕获的 Promise 错误。
整个流程中，需要在 Vuex Action 内或组件调用处 对可能报错的地方显式捕获。

9. 小结与最佳实践

模板层面
- 养成给所有会被渲染的属性（data、props）设置默认值的习惯。
- 模板里访问可能为 null/undefined 的字段，使用可选链 ? 或三元运算符做判断。
- v-for、v-if 等指令中，要确保渲染数据已初始化，或先做空值判断。
组件内部
- 在 async 函数中使用 try…catch。
- 在 Promise.then 链中务必加上 .catch。
- 针对元素引用（$refs）、provide/inject、第三方插件实例等，注意在合适的生命周期或 nextTick 中操作。
子组件异常捕获
- 使用 errorCaptured 钩子，父组件可捕获并处理子组件错误。
- 对于跨组件的 UX 降级或回退，要在父层展示友好提示，避免用户看到浏览器报错。
全局异常处理
- 在 main.js 中通过 config.errorHandler 统一捕获渲染、生命周期、事件回调中的未捕获异常。
- 将错误上报到日志收集系统（如 Sentry、LogRocket）并做友好提示。
第三方库/插件
- Vue Router 的异步路由守卫必须 catch 错误，或使用 router.onError 进行全局拦截。
- Vuex Action 里不要漏写错误捕获，组件调用方也应对 dispatch 返回的 Promise 捕获异常。
- 对于 Element-UI、Ant Design Vue 等组件库，关注文档中可能的异步操作；若官方钩子未处理错误，可自行做二次封装。
调试工具
- 善用浏览器 DevTools 的 Source Map 定位错误行号。
- 使用 Vue DevTools 查看组件树、data/props、事件调用链，从根本上排查数据未传或类型不对的问题。

通过以上思路与示例，你可以在大多数情况下快速定位并修复 Vue 项目中的 Uncaught runtime errors。当你的项目越来越大时，保持对数据流和异步调用链条的清晰认识 是关键：凡是存在异步调用、跨组件数据传递、第三方插件依赖等场景，都要提前考虑“可能会出错在哪里，我该怎么优雅地捕获并降级处理”。只要养成统一捕获、及时上报、友好提示的习惯，就能大幅降低线上异常对用户体验的冲击。

Vue中Uncaught runtime errors错误提示的解决方案‌

目录

1. 概述：什么是 Uncaught Runtime Errors

2. 常见的运行时错误类型与原因

2.1. 模板中访问未定义的属性

2.2. 方法/计算属性返回值错误

2.3. 组件生命周期中异步操作未捕获异常

2.4. 引用（`ref`）或状态管理未初始化

3. 调试思路与工具介绍

3.1. 浏览器控制台与 Source Map

3.2. Vue DevTools 的使用

4. 解决方案一：检查并修复模板语法错误

4.1. 访问未定义的 `data`/`props`

示例 1：`data` 未初始化

示例 2：`props` 类型不匹配或必填未传

4.2. 在 `v-for`、`v-if` 等指令中的注意点

4.3. 图解：模板渲染流程中的错误发生点

5. 解决方案二：在组件内使用 `errorCaptured` 钩子捕获子组件错误

5.1. `errorCaptured` 的作用与使用方法

5.2. 示例：父组件捕获子组件错误并显示提示

Step 1：子组件故意抛错

Step 2：父组件使用 `errorCaptured` 捕获

6. 解决方案三：全局错误处理（`config.errorHandler`）

6.1. 在主入口 `main.js` 中配置全局捕获

6.2. 示例：将错误上报到服务端或 Logger

7. 方案四：异步操作中的错误捕获（`try…catch`、Promise 错误处理）

7.1. `async/await` 常见漏写 `try…catch`

7.2. `Promise.then/catch` 未链式处理

7.3. 示例：封装一个通用请求函数并全局捕获

8. 方案五：第三方库与插件的注意事项

8.1. Vue Router 异步路由钩子中的错误

8.2. Vuex Action 中的错误

8.3. 图解：插件调用链条中的异常流向

9. 小结与最佳实践

评论已关闭

推荐阅读

目录

1. 概述：什么是 Uncaught Runtime Errors

2. 常见的运行时错误类型与原因

2.1. 模板中访问未定义的属性

2.2. 方法/计算属性返回值错误

2.3. 组件生命周期中异步操作未捕获异常

2.4. 引用（ref）或状态管理未初始化

3. 调试思路与工具介绍

3.1. 浏览器控制台与 Source Map

3.2. Vue DevTools 的使用

4. 解决方案一：检查并修复模板语法错误

4.1. 访问未定义的 data/props

示例 1：data 未初始化

示例 2：props 类型不匹配或必填未传

4.2. 在 v-for、v-if 等指令中的注意点

4.3. 图解：模板渲染流程中的错误发生点

5. 解决方案二：在组件内使用 errorCaptured 钩子捕获子组件错误

5.1. errorCaptured 的作用与使用方法

5.2. 示例：父组件捕获子组件错误并显示提示

Step 1：子组件故意抛错

Step 2：父组件使用 errorCaptured 捕获

6. 解决方案三：全局错误处理（config.errorHandler）

6.1. 在主入口 main.js 中配置全局捕获

6.2. 示例：将错误上报到服务端或 Logger

7. 方案四：异步操作中的错误捕获（try…catch、Promise 错误处理）

7.1. async/await 常见漏写 try…catch

7.2. Promise.then/catch 未链式处理

7.3. 示例：封装一个通用请求函数并全局捕获

8. 方案五：第三方库与插件的注意事项

8.1. Vue Router 异步路由钩子中的错误

8.2. Vuex Action 中的错误

8.3. 图解：插件调用链条中的异常流向

9. 小结与最佳实践

评论已关闭

推荐阅读

2.4. 引用（`ref`）或状态管理未初始化

4.1. 访问未定义的 `data`/`props`

示例 1：`data` 未初始化

示例 2：`props` 类型不匹配或必填未传

4.2. 在 `v-for`、`v-if` 等指令中的注意点

5. 解决方案二：在组件内使用 `errorCaptured` 钩子捕获子组件错误

5.1. `errorCaptured` 的作用与使用方法

Step 2：父组件使用 `errorCaptured` 捕获

6. 解决方案三：全局错误处理（`config.errorHandler`）

6.1. 在主入口 `main.js` 中配置全局捕获

7. 方案四：异步操作中的错误捕获（`try…catch`、Promise 错误处理）

7.1. `async/await` 常见漏写 `try…catch`

7.2. `Promise.then/catch` 未链式处理