VueWeb 随笔
技术探索

前端工程化与现代 Web 开发心法

2026-09-20 #Vue3#前端工程#架构设计

随着前端应用体量的膨胀，代码组织与工程化规范不再是锦上添花的点缀，而是决定项目能否长期稳定迭代的基石。

本文梳理了在实际开发中总结的前端工程化三大支柱：规范约束、状态流转与可复用组件抽象。

一、规范先于编码

好的工程化始于统一的团队共识。通过工具链把共识变成自动化检查，比人工 Code Review 更加可靠：

  • ESLint & Prettier：语法风格与代码质量底线，杜绝无意义的格式分歧。
  • Husky & Lint-Staged：在 git commit 时拦截不合规的代码。
  • Commitlint：统一遵循 Angular 规范的 Conventional Commits（feat:, fix:, refactor:）。
1
2
3
4
5
6
7
// package.json scripts 规范
{
  "scripts": {
    "lint": "eslint src --ext .vue,.js,.ts",
    "format": "prettier --write src/"
  }
}

二、Vue 3 组合式 API 的设计权衡

Vue 3 的 Composition API 赋予了开发者极大的自由度，但自由往往也伴随着混乱的风险。

tip 组合式函数的提取原则

一个优秀的 useXxx 组合式函数应当具备单一职责：

  1. 状态内聚：相关的响应式状态（ref/reactive）与操作函数放在一起。
  2. 生命周期自动解绑：若在函数内监听了事件或创建了定时器，务必在 onUnmounted 中自动注销。
  3. 按需解构：返回值通过 toRefs 或单独暴露 readonly 状态，避免外部直接篡改内部私有状态。

下面是一个实用的窗口尺寸监听 hook 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowResize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const update = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => window.addEventListener('resize', update))
  onUnmounted(() => window.removeEventListener('resize', update))

  return { width, height }
}

三、结语

工程化的终极目标从来不是堆砌前沿工具，而是以最低的心智负担交付最高质量的产品。在开发过程中多做一次抽象复盘，未来就能少打几次补丁。

评论
分享