Detail.vue:288 Uncaught (in promise) ReferenceError: onUnmounted is not defined at setup (Detail.vue:288:1)

<think>根据错误信息，`onUnmounted`未定义。这通常是因为在Vue3的`<script setup>`中，我们需要从`vue`中导入生命周期钩子。在原始代码中，我们只导入了`ref`, `reactive`, `onMounted`，但没有导入`onUnmounted`。 ### 解决方案： 在`import`语句中添加`onUnmounted`即可。 ### 修改后的代码： ```javascript <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; // 添加onUnmounted import axios from 'axios'; import { Document, User, OfficeBuilding, Search, Refresh } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus'; // ... 其余代码保持不变 ... // 组件卸载时取消所有请求 onUnmounted(() => { if (cancelTokenSource) { cancelTokenSource.cancel('组件卸载，取消请求'); } }); </script> ``` ### 完整代码修正： ```vue <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; // 确保导入onUnmounted import axios from 'axios'; import { Document, User, OfficeBuilding, Search, Refresh } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus'; // 环境变量管理API地址 const API_BASE = import.meta.env.VITE_API_BASE || 'http://172.26.26.43/dev-api'; const API_URL = `${API_BASE}/wjdc/wj/listTx`; // 表单数据 const formData = reactive({ dcWjTitle: '', dcId: '', dcDept: '', state: null }); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, size: 10, total: 0 }); // 表单引用 const indexForm = ref(null); // 请求取消令牌 let cancelTokenSource = axios.CancelToken.source(); // 搜索按钮处理函数 - 添加防抖 let searchTimer = null; const handleSearch = () => { if (searchTimer) clearTimeout(searchTimer); searchTimer = setTimeout(() => { pagination.current = 1; fetchData(); }, 300); }; // 重置按钮处理函数 const handleReset = () => { if (indexForm.value) { indexForm.value.resetFields(); } handleSearch(); }; // 查看详情 const handleView = (row) => { console.log('查看详情:', row); // 这里可以实现查看详情的逻辑 }; // 分页大小改变 const handleSizeChange = (size) => { pagination.size = size; fetchData(); }; // 页码改变 const handlePageChange = (page) => { pagination.current = page; fetchData(); }; // 获取数据 const fetchData = async () => { // 取消之前的请求 if (cancelTokenSource) { cancelTokenSource.cancel('请求被取消'); } cancelTokenSource = axios.CancelToken.source(); loading.value = true; try { // 构造请求参数 const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData }; // 调用API const response = await axios.get(API_URL, { params, cancelToken: cancelTokenSource.token, headers: { 'Content-Type': 'application/json' } }); // 处理响应数据 const { data } = response; if (data && data.code === 200) { tableData.value = data.data.rows || []; pagination.total = data.data.total || 0; // 空数据提示 if (tableData.value.length === 0) { ElMessage.info('没有找到匹配的数据'); } } else { const errorMsg = data?.msg || '未知错误'; console.error('API返回错误:', errorMsg); ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } catch (error) { // 忽略取消请求的错误 if (!axios.isCancel(error)) { console.error('获取数据失败:', error); ElMessage.error('网络请求失败，请稍后重试'); tableData.value = []; pagination.total = 0; } } finally { loading.value = false; } }; // 页面加载时获取初始数据 onMounted(() => { fetchData(); }); // 组件卸载时取消所有请求 onUnmounted(() => { if (cancelTokenSource) { cancelTokenSource.cancel('组件卸载，取消请求'); } }); </script> ``` ### 错误原因分析： 在Vue3的组合式API中，所有的生命周期钩子都需要显式导入。原始代码中只导入了`onMounted`，没有导入`onUnmounted`，导致在调用`onUnmounted`时出现`ReferenceError`。 ### 最佳实践： - 在`<script setup>`中，任何Vue提供的函数（如`ref`, `reactive`, 生命周期钩子等）都需要从`'vue'`中导入。 - 使用ESLint等工具可以帮助检查这类错误。 ### 其他注意事项： 1. **取消请求的实现**：我们使用了Axios的CancelToken，但注意在每次请求前取消之前的请求，并生成新的CancelToken。 2. **防抖处理**：在搜索时，我们设置了300ms的防抖，避免用户快速输入时频繁请求。 3. **环境变量**：使用`import.meta.env`获取Vite环境变量，注意变量需要以`VITE_`开头。 §§相关问题§§: 1. Vue3的生命周期钩子有哪些？它们分别在什么时机被调用？ 2. 在Vue3中，如何正确使用Axios进行API请求？ 3. 如何在前端应用中实现请求的防抖（debounce）和节流（throttle）？ 4. 在组件卸载时，除了取消请求，还有哪些资源需要清理？</think>这个错误是因为在 Vue 3 的 `<script setup>` 语法中，所有 Vue 提供的函数都需要显式导入。错误信息表明 `onUnmounted` 没有被正确导入。让我提供一个完整的修复方案： ### 解决方案 ```vue <script setup> // 确保正确导入所有 Vue 函数 import { ref, reactive, onMounted, onUnmounted } from 'vue'; import axios from 'axios'; import { Document, User, OfficeBuilding, Search, Refresh } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus'; // 环境变量管理API地址 const API_BASE = import.meta.env.VITE_API_BASE || 'http://172.26.26.43/dev-api'; const API_URL = `${API_BASE}/wjdc/wj/listTx`; // 表单数据 const formData = reactive({ dcWjTitle: '', dcId: '', dcDept: '', state: null }); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, size: 10, total: 0 }); // 表单引用 const indexForm = ref(null); // 请求取消令牌 let cancelTokenSource = axios.CancelToken.source(); // 搜索按钮处理函数 - 添加防抖 let searchTimer = null; const handleSearch = () => { if (searchTimer) clearTimeout(searchTimer); searchTimer = setTimeout(() => { pagination.current = 1; fetchData(); }, 300); }; // 重置按钮处理函数 const handleReset = () => { if (indexForm.value) { indexForm.value.resetFields(); } handleSearch(); }; // 查看详情 const handleView = (row) => { console.log('查看详情:', row); // 这里可以实现查看详情的逻辑 }; // 分页大小改变 const handleSizeChange = (size) => { pagination.size = size; fetchData(); }; // 页码改变 const handlePageChange = (page) => { pagination.current = page; fetchData(); }; // 获取数据 const fetchData = async () => { // 取消之前的请求 if (cancelTokenSource) { cancelTokenSource.cancel('请求被取消'); } cancelTokenSource = axios.CancelToken.source(); loading.value = true; try { // 构造请求参数 const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData }; // 调用API const response = await axios.get(API_URL, { params, cancelToken: cancelTokenSource.token, headers: { 'Content-Type': 'application/json' } }); // 处理响应数据 const { data } = response; if (data && data.code === 200) { tableData.value = data.data.rows || []; pagination.total = data.data.total || 0; // 空数据提示 if (tableData.value.length === 0) { ElMessage.info('没有找到匹配的数据'); } } else { const errorMsg = data?.msg || '未知错误'; console.error('API返回错误:', errorMsg); ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } catch (error) { // 忽略取消请求的错误 if (!axios.isCancel(error)) { console.error('获取数据失败:', error); ElMessage.error('网络请求失败，请稍后重试'); tableData.value = []; pagination.total = 0; } } finally { loading.value = false; } }; // 页面加载时获取初始数据 onMounted(() => { fetchData(); }); // 组件卸载时取消所有请求 onUnmounted(() => { if (cancelTokenSource) { cancelTokenSource.cancel('组件卸载，取消请求'); } }); </script> ``` ### 错误原因分析 1. **Vue 3 的 Composition API 要求**： - 在 `<script setup>` 语法中，所有 Vue 提供的函数（如 `ref`, `reactive`, `onMounted`, `onUnmounted` 等）都需要显式导入 - 错误信息 `Uncaught (in promise) ReferenceError: onUnmounted is not defined` 表明 `onUnmounted` 没有被正确导入 2. **解决方案**： ```javascript // 修复前（缺少 onUnmounted 导入） import { ref, reactive, onMounted } from 'vue'; // 修复后（添加 onUnmounted 导入） import { ref, reactive, onMounted, onUnmounted } from 'vue'; ``` ### Vue 3 生命周期钩子完整导入指南 在 Vue 3 的 Composition API 中，所有生命周期钩子都需要显式导入： ```javascript import { onBeforeMount, // 在挂载开始之前调用 onMounted, // 在组件挂载后调用 onBeforeUpdate, // 在响应式数据变更后、重新渲染前调用 onUpdated, // 在重新渲染后调用 onBeforeUnmount, // 在卸载组件实例之前调用 onUnmounted, // 在卸载组件实例后调用 onActivated, // 在 keep-alive 组件激活时调用 onDeactivated, // 在 keep-alive 组件停用时调用 onErrorCaptured // 在捕获后代组件错误时调用 } from 'vue'; ``` ### 最佳实践：封装 API 请求 为了避免重复代码和错误，可以封装 API 请求函数： ```javascript // utils/api.js import axios from 'axios'; // 创建 axios 实例 const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE || 'http://172.26.26.43/dev-api', timeout: 10000, headers: { 'Content-Type': 'application/json' } }); /** * 封装 GET 请求 * @param {string} url 请求地址 * @param {Object} params 请求参数 * @param {Object} options 额外选项 * @returns {Promise} 返回 Promise */ export const get = (url, params = {}, options = {}) => { return api.get(url, { params, cancelToken: options.cancelToken, ...options }); }; /** * 封装 POST 请求 * @param {string} url 请求地址 * @param {Object} data 请求数据 * @param {Object} options 额外选项 * @returns {Promise} 返回 Promise */ export const post = (url, data = {}, options = {}) => { return api.post(url, data, options); }; ``` ### 在组件中使用封装的 API ```javascript <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; import { ElMessage } from 'element-plus'; import { get } from '@/utils/api'; // 导入封装的 API // ...其他代码... // 获取数据 const fetchData = async () => { loading.value = true; try { // 构造请求参数 const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData }; // 使用封装的 get 方法 const response = await get('/wjdc/wj/listTx', params, { cancelToken: cancelTokenSource.token }); // 处理响应数据... } catch (error) { // 错误处理... } finally { loading.value = false; } }; </script> ``` ### 为什么需要 onUnmounted 1. **资源清理**： - 取消未完成的请求，避免内存泄漏 - 清除定时器、事件监听器等资源 2. **性能优化**： - 防止组件卸载后仍执行不必要的操作 - 避免在已卸载组件上更新状态导致的错误 3. **错误预防**： - 防止用户离开页面后，异步操作完成时更新已卸载组件的状态 - 避免 "Can't perform a React state update on an unmounted component" 类似错误 ### 常见生命周期错误解决方案 | 错误类型 | 原因 | 解决方案 | |----------|------|----------| | `onMounted is not defined` | 忘记导入 `onMounted` | `import { onMounted } from 'vue'` | | `onUnmounted is not defined` | 忘记导入 `onUnmounted` | `import { onUnmounted } from 'vue'` | | `Cannot read properties of undefined` | 在生命周期钩子中访问未初始化的 ref | 确保 ref 在 `onMounted` 中初始化 | | `Maximum recursive updates exceeded` | 在生命周期钩子中修改触发该钩子的状态 | 避免在钩子中修改触发钩子的响应式状态 |