前端開發技術深度總結報告

📋 項目背景

基于 Vue 3 + TypeScript + Element Plus 的企業級產品管理系統，重點解決產品表單的數據緩存、頁面導航、用戶體驗等核心問題。

�� 遇到的問題及解決方案

1. 瀏覽器控制臺錯誤處理

問題: 大量第三方庫錯誤污染控制臺

// 錯誤示例
Unchecked runtime.lastError: A listener indicated an asynchronous response...
Textarea height < 300px 這可能會導致 modal hoverbar 定位異常

解決方案: 創建全局錯誤處理器

// src/utils/errorHandler.ts
export const initGlobalErrorHandler = () => {window.addEventListener('error', (event) => {if (isKnownThirdPartyError(event.error)) returnsafeErrorLog('Vue Error:', event.error)})
}const isKnownThirdPartyError = (error: any) => {return error?.message?.includes('runtime.lastError') ||error?.message?.includes('Textarea height')
}

2. Vue 組件生命周期問題

問題: 組件卸載時數據丟失，重新創建時狀態不恢復
解決方案: 實現智能緩存策略

// 編輯產品：內存緩存
productCacheService.setProductData(productId, data)// 新增產品：本地存儲
localStorage.setItem('productForm_add_data', JSON.stringify(data))

3. 路由導航異常

問題: 點擊編輯按鈕路徑變化但頁面不打開
解決方案: 修復模板語法錯誤和路由配置

<!-- 修復前 -->
<template><div v-if="isCheck"><!-- 內容被隱藏 --></div>
</template><!-- 修復后 -->
<template><div><!-- 正常顯示 --></div>
</template>

4. 數據同步和狀態管理

問題: 新增產品數據被編輯產品數據覆蓋
解決方案: 分離緩存策略

const loadProductData = async () => {if (productId) {// 編輯產品：從全局緩存恢復if (productCacheService.hasProductData(productIdNum)) {formData.value = productCacheService.getProductData(productIdNum)}} else {// 新增產品：從本地存儲恢復const savedData = localStorage.getItem('productForm_add_data')if (savedData) {formData.value = JSON.parse(savedData)}}
}

🚀 學習的新技術和知識

1. Vue 3 Composition API 深度應用

響應式系統

// 基礎響應式
const formData = ref({})
const currentProductId = ref<number | null>(null)// 計算屬性優化
const isCheck = computed(() => false)// 監聽器深度應用
watch(formData, (newData) => {if (currentProductId.value) {// 編輯產品：更新全局緩存productCacheService.updateProductData(currentProductId.value, newData)} else {// 新增產品：實時保存到本地存儲localStorage.setItem('productForm_add_data', JSON.stringify(newData))}
}, { deep: true })// 生命周期鉤子
onMounted(async () => {await loadProductData()await Promise.all([getCategoryList(),getUnitList(),getBrandList()])
})onUnmounted(() => {console.log('組件卸載，緩存狀態:', productCacheService.getCacheStats())
})

組件通信和引用

// 模板引用
const skuListRef = ref<InstanceType<typeof SkuList>>()// 子組件方法調用
nextTick(() => {if (skuListRef.value?.tableValueChange) {skuListRef.value.tableValueChange(newIndex)}
})// 組件暴露方法
defineExpose({tableValueChange: (index: number) => {// 處理表格值變化}
})

2. Vue Router 4 高級用法

路由參數監聽

// 監聽路由參數變化
watch(() => route.query.id, (newId, oldId) => {console.log(`路由參數變化: ${oldId} -> ${newId}`)loadProductData()
})// 路由跳轉
const openForm = (id?: number) => {const routeData = {name: 'ProductFormAdd',query: id ? { id } : {}}router.push(routeData)
}

動態路由配置

// src/router/modules/remaining.ts
{path: '/erp/product/product/add',name: 'ProductFormAdd',component: () => import('@/views/erp/product/product/ProductForm.vue'),meta: {title: '新增產品',noCache: false}
}

3. Pinia 狀態管理

Store 定義

// src/store/modules/tagsView.ts
export const useTagsViewStore = defineStore('tagsView', {state: (): TagsViewState => ({visitedViews: [],cachedViews: new Set(),selectedTag: undefined}),actions: {addVisitedView(view: RouteLocationNormalizedLoaded) {// 為產品編輯頁面添加序號if (view.name === 'ProductFormAdd' && view.query?.id) {const productEditCount = this.visitedViews.filter(v => v.name === 'ProductFormAdd' && v.query?.id).lengthconst title = `編輯產品 ${productEditCount + 1}`visitedView.meta.title = title}},delView(view: RouteLocationNormalizedLoaded) {// 關閉新增產品頁面時清除本地存儲if (view.name === 'ProductFormAdd' && !view.query?.id) {localStorage.removeItem('productForm_add_data')console.log('關閉新增產品標簽頁，清除本地存儲數據')}this.delVisitedView(view)this.delCachedView()}}
})

4. TypeScript 高級特性

類型定義和接口

// 接口定義
interface ProductFormData {name: stringproductNameEn: stringbrandId: number | undefinedagentBrand: string | undefinedcategoryId: number | undefinedtype: stringcasNo: stringhazardous: booleanpicUrl: stringstatus: numberremark: stringskus: SkuItem[]
}// 類型斷言
const formData = ref<ProductFormData>({brandId: undefined as any,agentBrand: undefined as any,categoryId: undefined as any
})// 泛型應用
class ProductCacheService {private cache = new Map<number, CacheData>()setProductData(productId: number, data: CacheData): voidgetProductData(productId: number): CacheData | undefined
}

類型守衛

const loadProductData = async () => {const productId = route.params.id || route.query.idif (productId) {const productIdNum = Number(productId)if (!isNaN(productIdNum)) {// 編輯產品邏輯}} else {// 新增產品邏輯}
}

5. 瀏覽器 API 深度應用

本地存儲管理

// 數據持久化
const saveToLocalStorage = (data: any) => {try {localStorage.setItem('productForm_add_data', JSON.stringify(data))} catch (error) {console.error('保存到本地存儲失敗:', error)}
}const loadFromLocalStorage = () => {try {const savedData = localStorage.getItem('productForm_add_data')return savedData ? JSON.parse(savedData) : null} catch (error) {console.error('從本地存儲加載失敗:', error)return null}
}const clearLocalStorage = () => {localStorage.removeItem('productForm_add_data')
}

事件處理

// 全局錯誤處理
window.addEventListener('error', (event) => {if (isKnownThirdPartyError(event.error)) returnsafeErrorLog('Vue Error:', event.error)
})window.addEventListener('unhandledrejection', (event) => {if (isKnownThirdPartyError(event.reason)) returnsafeErrorLog('Unhandled Promise Rejection:', event.reason)
})

6. 設計模式和架構思想

單例模式 - 全局緩存服務

// src/utils/productCache.ts
class ProductCacheService {private static instance: ProductCacheServiceprivate cache = new Map<number, any>()static getInstance(): ProductCacheService {if (!this.instance) {this.instance = new ProductCacheService()}return this.instance}setProductData(productId: number, data: any) {this.cache.set(productId, {formData: JSON.parse(JSON.stringify(data.formData)),initialFormData: JSON.parse(JSON.stringify(data.initialFormData)),propertyList: JSON.parse(JSON.stringify(data.propertyList)),timestamp: Date.now()})this.clearOldCache()}private clearOldCache() {if (this.cache.size > 10) {const entries = Array.from(this.cache.entries())entries.sort((a, b) => a[1].timestamp - b[1].timestamp)this.cache.delete(entries[0][0])}}
}export const productCacheService = ProductCacheService.getInstance()

觀察者模式 - Vue 響應式系統

// 數據變化自動觸發保存
watch(formData, (newData) => {if (currentProductId.value && newData) {// 編輯產品：更新全局緩存productCacheService.updateProductData(currentProductId.value, {formData: newData,initialFormData: initialFormData.value,propertyList: propertyList.value})} else if (!currentProductId.value && newData) {// 新增產品：實時保存到本地存儲localStorage.setItem('productForm_add_data', JSON.stringify(newData))}
}, { deep: true })

策略模式 - 錯誤處理

const errorHandlers = {wangEditor: (error: any) => {return error?.message?.includes('Textarea height')},browserExtension: (error: any) => {return error?.message?.includes('runtime.lastError')},default: (error: any) => {return false}
}const isKnownThirdPartyError = (error: any) => {for (const handler of Object.values(errorHandlers)) {if (handler(error)) return true}return false
}

7. Element Plus 組件庫深度使用

表單組件

<template><el-formref="formRef":model="formData":rules="rules"label-width="120px"><el-form-item label="產品名稱" prop="name"><el-input v-model="formData.name" placeholder="請輸入產品名稱" /></el-form-item><el-form-item label="產品狀態" prop="status"><el-radio-group v-model="formData.status"><el-radio :label="1">啟用</el-radio><el-radio :label="0">禁用</el-radio></el-radio-group></el-form-item></el-form>
</template><script setup>
const rules = {name: [{ required: true, message: '請輸入產品名稱', trigger: 'blur' }]
}const formRef = ref()
const validateForm = async () => {try {await formRef.value?.validate()return true} catch (error) {return false}
}
</script>

表格組件

<template><el-table :data="tableData" ref="tableRef"><el-table-columnv-for="column in dynamicColumns":key="column.prop":prop="column.prop":label="column.label":width="column.width"/></el-table>
</template><script setup>
const updateTableHeaders = () => {// 動態更新表格列dynamicColumns.value = propertyList.value.map((prop, index) => ({prop: `sku_${index}`,label: prop.name,width: 120}))
}
</script>

8. 異步編程和錯誤處理

Promise 和 async/await

const loadProductData = async () => {try {pageLoading.value = trueif (productId) {const productIdNum = Number(productId)if (productCacheService.hasProductData(productIdNum)) {console.log(`從緩存加載產品 ${productIdNum}`)const cachedData = productCacheService.getProductData(productIdNum)formData.value = cachedData.formDatainitialFormData.value = cachedData.initialFormDatapropertyList.value = cachedData.propertyList} else {console.log(`從API加載產品 ${productIdNum}`)const productData = await ProductApi.getProduct(productIdNum)formData.value = productDatainitialFormData.value = JSON.parse(JSON.stringify(productData))// 緩存數據productCacheService.setProductData(productIdNum, {formData: productData,initialFormData: initialFormData.value,propertyList: propertyList.value})}} else {// 新增產品頁面，從本地存儲恢復數據const savedData = localStorage.getItem('productForm_add_data')if (savedData) {console.log('從本地存儲恢復新增產品數據:', savedData)formData.value = JSON.parse(savedData)initialFormData.value = JSON.parse(savedData)} else {console.log('新增產品頁面，初始化空數據')}}} catch (error) {console.error('加載數據失敗:', error)ElMessage.error('加載產品數據失敗，請重試')} finally {pageLoading.value = false}
}

并發請求處理

onMounted(async () => {try {await loadProductData()// 并發加載基礎數據await Promise.all([getCategoryList(),getUnitList(),getPackageUnitList(),getBrandList(),UserApi.getSimpleUserList()])} catch (error) {console.error('初始化失敗:', error)}
})

9. 性能優化技術

防抖和節流

// 防抖保存
const debouncedSave = debounce(() => {if (!currentProductId.value && formData.value.name) {localStorage.setItem('productForm_add_data', JSON.stringify(formData.value))}
}, 300)// 在 watch 中使用
watch(formData, debouncedSave, { deep: true })

內存管理

onUnmounted(() => {// 清理事件監聽器// 清理定時器// 清理緩存（可選）
})

組件懶加載

// 路由懶加載
const ProductForm = () => import('@/views/erp/product/product/ProductForm.vue')// 組件懶加載
const SkuList = defineAsyncComponent(() => import('./components/SkuList.vue'))

10. 調試和開發工具

控制臺調試技巧

// 結構化日志
console.log('調試信息:', {formData: formData.value,cacheKey: getCacheKey(),timestamp: new Date().toISOString()
})// 條件調試
if (process.env.NODE_ENV === 'development') {console.log('開發環境調試信息')
}// 性能監控
console.time('數據加載')
await loadProductData()
console.timeEnd('數據加載')

瀏覽器開發者工具

Application > Local Storage: 查看本地存儲數據
Console > 錯誤過濾: 過濾第三方錯誤
Network > API 請求分析: 分析網絡請求
Vue DevTools: 組件狀態和路由監控

��? 架構設計和技術選型

技術棧

前端框架: Vue 3.4+ + TypeScript 5.0+
UI 組件庫: Element Plus 2.4+
狀態管理: Pinia 2.1+
路由管理: Vue Router 4.2+
構建工具: Vite 5.0+
代碼規范: ESLint + Prettier
版本控制: Git

項目結構

src/
├── api/                    # API 接口
├── components/             # 公共組件
├── hooks/                  # 組合式函數
├── layout/                 # 布局組件
├── router/                 # 路由配置
├── store/                  # 狀態管理
├── utils/                  # 工具函數
├── views/                  # 頁面組件
└── types/                  # 類型定義

核心設計原則

單一職責: 每個函數和組件只負責一個功能
開閉原則: 對擴展開放，對修改封閉
依賴倒置: 依賴抽象而不是具體實現
接口隔離: 客戶端不應該依賴它不需要的接口

📈 性能優化和用戶體驗

1. 加載性能

路由懶加載
組件按需加載
圖片懶加載
代碼分割

2. 運行時性能

響應式數據優化
計算屬性緩存
事件處理優化
內存泄漏防護

3. 用戶體驗

加載狀態提示
錯誤處理和反饋
數據自動保存
頁面切換動畫

🔧 開發工具和最佳實踐

1. 代碼質量

// ESLint 配置
{"extends": ["@vue/typescript/recommended","@vue/prettier","@vue/prettier/@typescript-eslint"]
}// TypeScript 配置
{"compilerOptions": {"strict": true,"noImplicitAny": true,"strictNullChecks": true}
}

2. Git 工作流

# 功能分支開發
git checkout -b feature/product-form-cache# 提交規范
git commit -m "feat: 實現產品表單數據緩存功能"# 代碼審查
git push origin feature/product-form-cache

3. 測試策略

// 單元測試
import { mount } from '@vue/test-utils'
import ProductForm from '@/views/erp/product/product/ProductForm.vue'describe('ProductForm', () => {it('should save form data to localStorage', async () => {const wrapper = mount(ProductForm)// 測試邏輯})
})