2026前端技术从「夯」到「拉」

像我这样帅的人丶你还2026-03-11 16:16

前端技术「夯」与「拉」：常用库与框架优缺点盘点

「夯」指优点、顺手之处，「拉」指缺陷与槽点。本文按类型盘点常用技术，并给出特点 与代码场景应用，方便选型与落地。

摘要

每项技术都有其「夯」与「拉」，同时具备鲜明的特点 和典型的应用场景 。本文在优缺点之外，补充等级划分（夯 > 顶级 > 人上人 > npc > 拉完了）、特点归纳和可复用的代码示例，便于在项目中快速对号入座。

一、语言与工程化

TypeScript

等级 ：夯
特点：静态类型、编译时检查、接口/泛型/联合类型、与 JS 生态兼容、IDE 智能提示强。

维度 （优点） （缺陷/不足）
类型系统 静态类型、智能提示、重构安全 学习曲线、泛型/高级类型对新手不友好
生态 主流框架都支持，工具链成熟 和部分老库类型不全要自己补 .d.ts

代码场景应用：为接口与组件定义类型，请求与列表用泛型保留类型。

ts 复制代码 
// 接口与组件 props 类型
interface User {
  id: number;
  name: string;
}

interface ApiResult<T> {
  code: number;
  data: T;
}

async function fetchUser(id: number): Promise<ApiResult<User>> {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

JavaScript (ES6+)

等级 ：npc
特点：弱类型、动态、单线程+事件循环、模块化(ESM)、Promise/async、解构/展开等语法丰富。

维度 （优点） （缺陷/不足）
生态与灵活 生态最大、写法自由、上手快 弱类型导致运行时错误多
标准 标准推进快，引擎优化好 历史包袱多，兼容靠 Babel 等

代码场景应用：快速写小脚本、与现有无类型项目对接。

js 复制代码 
// 解构、async/await、可选链
const { data } = await fetch('/api/config').then(r => r.json());
const name = data?.user?.name ?? '匿名';

SCSS / Sass

等级 ：人上人
特点：变量、嵌套、mixin、函数、模块化、可编译为 CSS。

维度 （优点） （缺陷/不足）
能力 变量/嵌套/mixin 减少重复 嵌套过深可读性差，需预编译

代码场景应用：主题色与间距变量、公共样式 mixin、BEM 式组件样式。

scss 复制代码 
// variables
$primary: #1890ff;
$spacing: 8px;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  padding: $spacing * 2;
  &__header { @include flex-center; }
}

Tailwind CSS

等级 ：顶级
特点：原子类、实用优先、按需生成、可配置设计令牌、无预写组件样式。

维度 （优点） （缺陷/不足）
效率 少写自定义 CSS、改版快 类名长，HTML 易臃肿

代码场景应用：快速搭布局与响应式、统一间距与颜色体系。

html 复制代码 
<div class="flex items-center justify-between p-4 rounded-lg bg-white shadow">
  <h2 class="text-lg font-semibold text-gray-800">标题</h2>
  <button class="px-3 py-1 text-sm text-white bg-blue-500 rounded hover:bg-blue-600">操作</button>
</div>

二、框架

Vue（2 / 3）

等级 ：顶级
特点：响应式数据、模板语法、单文件组件(SFC)、Options API / Composition API、官方路由与状态方案。

维度 （优点） （缺陷/不足）
上手与模板 模板直观、文档友好、国内生态好 Vue2/3 与两套 API 迁移成本
响应式 响应式清晰，Vue3 性能更好 深入原理要理解依赖收集、Proxy

代码场景应用：表单双向绑定、列表渲染、组合式逻辑复用。

vue 复制代码 
<script setup lang="ts">
import { ref, computed } from 'vue';
const list = ref<Item[]>([]);
const total = computed(() => list.value.length);
</script>
<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
  <p>共 {{ total }} 条</p>
</template>

React

等级 ：夯
特点：组件化、单向数据流、JSX、Hooks、虚拟 DOM、生态极大。

维度 （优点） （缺陷/不足）
组件与生态 组件化清晰、生态大、跨端统一 只管 UI，路由/状态要自选
心智 函数式 + Hooks 表达力强 Hooks 规则要记牢，两套写法并存

代码场景应用：函数组件 + Hooks、列表与条件渲染、受控表单。

tsx 复制代码 
function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const add = (text: string) => setTodos(prev => [...prev, { id: Date.now(), text }]);
  return (
    <ul>
      {todos.map(t => <li key={t.id}>{t.text}</li>)}
    </ul>
  );
}

Angular

等级 ：npc
特点：一体化框架、TypeScript 优先、依赖注入、模块化、RxJS 集成、CLI 标准化。

维度 （优点） （缺陷/不足）
一体化 路由/状态/表单/HTTP 官方全包 概念多、上手重、包体大

代码场景应用：服务注入、组件与模板、HTTP 请求封装。

ts 复制代码 
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
  getUsers() { return this.http.get<User[]>('/api/users'); }
}

三、跨端与微前端

UniApp

等级 ：人上人
特点：基于 Vue、一套代码多端运行（H5、微信/支付宝/头条等小程序、App）、条件编译、内置 UI 与 API、DCloud 生态。

维度 （优点） （缺陷/不足）
跨端 一次开发多端发布、学习成本低（会 Vue 即可） 各端差异需条件编译、部分原生能力要插件或原生扩展
生态与性能 插件市场丰富、文档与社区以国内为主 包体与性能不如纯原生，复杂动效或极致性能场景受限

代码场景应用：多端统一的活动页/商城、小程序 + H5 并行、轻量 App。

vue 复制代码 
<!-- 页面结构多端通用 -->
<template>
  <view class="page">
    <text>{{ title }}</text>
    <button @click="onSubmit">提交</button>
  </view>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('首页');
// #ifdef MP-WEIXIN
// 仅微信小程序
// #endif
// #ifdef H5
// 仅 H5
// #endif
</script>

Qiankun

等级 ：顶级
特点：阿里开源微前端框架、基于 single-spa、主应用 + 子应用、JS 沙箱、样式隔离、资源预加载、与 Vue/React 等技术栈无关。

维度 （优点） （缺陷/不足）
架构 子应用独立开发部署、技术栈可混用、主应用统一入口与鉴权 主子应用通信、路由与 base 要约定好，改造成本不低
运行时 沙箱隔离、样式隔离、生命周期清晰 依赖与公共库要统一版本或 externals，深层次问题排查成本高

代码场景应用：中后台多团队多技术栈合并、老项目渐进迁移、大系统按业务拆子应用。

ts 复制代码 
// 主应用注册子应用
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'sub-vue',
    entry: '//localhost:7100',
    container: '#subapp',
    activeRule: '/vue',
  },
  {
    name: 'sub-react',
    entry: '//localhost:7200',
    container: '#subapp',
    activeRule: '/react',
  },
]);
start();
ts 复制代码 
// 子应用（Vue）导出生命周期
export async function bootstrap() {}
export async function mount(props) {
  app = createApp(App);
  app.mount(props.container.querySelector('#app'));
}
export async function unmount() {
  app.unmount();
}

Taro

等级 ：人上人
特点：京东开源、React/Vue 语法、多端统一（H5、小程序、RN 等）、编译时多端适配、与 UniApp 同属跨端方案。

维度 （优点） （缺陷/不足）
跨端与语法 支持 React 技术栈、多端一致 API 与 UniApp 类似，端差异与条件编译要自己兜底
生态 社区与文档完善、可配合 NutUI 等 包体与性能与 UniApp 类似，选型时与 UniApp 二选一即可

代码场景应用：React 技术栈团队做小程序/H5/RN、与现有 React 项目共享逻辑。

tsx 复制代码 
// Taro 页面（React 写法）
import { View, Text, Button } from '@tarojs/components';
function Index() {
  return (
    <View className="page">
      <Text>首页</Text>
      <Button onClick={() => Taro.navigateTo({ url: '/pages/detail/index' })}>详情</Button>
    </View>
  );
}
export default Index;

四、状态管理

Redux

等级 ：人上人
特点：单一数据源、纯函数 reducer、dispatch/action、不可变更新、中间件、时间旅行调试。

维度 （优点） （缺陷/不足）
可预测性 状态变更可追溯、中间件丰富 样板多、概念多

代码场景应用：全局用户信息、主题、多组件共享列表的增删改。

ts 复制代码 
// slice 思路（RTK）
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
});
export const { increment, decrement } = counterSlice.actions;

Redux Toolkit (RTK)

等级 ：顶级
特点：createSlice、immer 内置、configureStore、RTK Query 管请求与缓存、减少样板。

维度 （优点） （缺陷/不足）
体验 样板少、DevTools 友好 仍是 Redux 体系，要理解 slice

代码场景应用：同上，用 createSlice + configureStore 替代手写 action/reducer。

ts 复制代码 
const store = configureStore({ reducer: { counter: counterReducer } });
// 组件中
dispatch(increment());

Vuex

等级 ：拉完了
特点：state/getter/mutation/action/module、与 Vue 响应式结合、DevTools 支持。

维度 （优点） （缺陷/不足）
与 Vue 官方推荐、集成好 概念多，Vue3 更推 Pinia

代码场景应用：全局用户、权限、多页共享的列表数据。

js 复制代码 
// store
export default new Vuex.Store({
  state: { user: null },
  mutations: { setUser(state, user) { state.user = user; } },
  actions: { async fetchUser({ commit }, id) { const u = await api.getUser(id); commit('setUser', u); } },
});
// 组件
this.$store.dispatch('fetchUser', this.userId);

Pinia

等级 ：顶级
特点：无 mutation、Store 即 state+action、TypeScript 友好、模块化自然、兼容 Vue2/3。

维度 （优点） （缺陷/不足）
API 与类型 API 简单、TS 友好 相对较新，从 Vuex 迁移要改写法

代码场景应用：替代 Vuex 的全局状态、多 store 按功能拆分。

ts 复制代码 
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', id: 0 }),
  actions: {
    async fetch(id: number) {
      const res = await request.get<User>(`/users/${id}`);
      this.name = res.data.name;
      this.id = res.data.id;
    },
  },
});
// 组件
const userStore = useUserStore();
userStore.fetch(1);

MobX

等级 ：npc
特点：响应式、可观察状态、自动追踪依赖、写法像普通对象。

维度 （优点） （缺陷/不足）
写法 代码量少、像写普通对象 隐式依赖，调试不如 Redux 直观

代码场景应用：复杂表单、多字段联动、希望「改数据即更新视图」的场景。

ts 复制代码 
class TodoStore {
  @observable list: Todo[] = [];
  @action add(text: string) { this.list.push({ id: Date.now(), text }); }
}
const store = new TodoStore();

五、请求与数据

Axios

等级 ：顶级
特点：拦截器、取消请求、进度、适配器、Promise、可配 baseURL 与超时。

维度 （优点） （缺陷/不足）
能力 拦截器统一鉴权与错误、封装方便 体积比 fetch 大

代码场景应用：统一实例、请求/响应拦截器、按业务封装 API。

ts 复制代码 
const instance = axios.create({ baseURL: '/api', timeout: 10000 });
instance.interceptors.request.use(c => {
  c.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return c;
});
instance.interceptors.response.use(r => r.data, e => Promise.reject(e));
export const getUser = (id: number) => instance.get<User>(`/users/${id}`);

Fetch

等级 ：npc
特点：浏览器原生、Promise、无拦截器、需 AbortController 取消。

维度 （优点） （缺陷/不足）
标准与体积 无额外依赖、标准统一 错误与取消要自己处理

代码场景应用：简单 GET、不依赖统一鉴权的静态或公开接口。

ts 复制代码 
const res = await fetch('/api/config');
if (!res.ok) throw new Error(res.statusText);
const data = await res.json();

React Query / TanStack Query

等级 ：顶级
特点：服务端状态、缓存、staleTime、重试、轮询、乐观更新、DevTools。

维度 （优点） （缺陷/不足）
请求与缓存 缓存与失效策略清晰 概念多，简单 CRUD 可能用不到全部

代码场景应用：列表拉取、详情拉取、依赖 key 的缓存与失效。

tsx 复制代码 
const { data, isLoading, error, refetch } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});
if (isLoading) return <Spin />;
return <div>{data?.name}</div>;

SWR

等级 ：npc
特点：stale-while-revalidate、API 简洁、与 Next 等配合好、轻量。

维度 （优点） （缺陷/不足）
轻量与体验 用法简单、自动 revalidate 功能比 React Query 少

代码场景应用：简单数据拉取、需要「先展示缓存再更新」的页面。

tsx 复制代码 
const { data, error, mutate } = useSWR('/api/user', fetcher);

六、UI 组件库

Ant Design (antd)

等级 ：顶级
特点：企业级、表格/表单/布局/反馈组件全、设计规范统一、Pro 组件、React 生态。

维度 （优点） （缺陷/不足）
组件与设计 组件全、表格表单强 包大、样式覆盖要折腾

代码场景应用：后台管理系统、表格+分页+筛选、表单校验、Modal/Message。

tsx 复制代码 
import { Table, Button, Form, Input } from 'antd';
<Table columns={columns} dataSource={list} pagination={{ pageSize: 10 }} />
<Form onFinish={onSubmit}><Form.Item name="name" rules={[{ required: true }]}><Input /></Form.Item></Form>

Element Plus / Element UI

等级 ：人上人
特点：Vue 生态、组件全、文档清晰、表格/表单/布局/反馈齐全、偏后台风格。

维度 （优点） （缺陷/不足）
与 Vue 贴合 Vue、文档好 风格偏后台，大版本迁移成本

代码场景应用：Vue 后台、表格、表单、对话框、消息提示。

vue 复制代码 
<el-table :data="list">
  <el-table-column prop="name" label="姓名" />
  <el-table-column prop="age" label="年龄" />
</el-table>
<el-button type="primary" @click="handleAdd">新增</el-button>

Vant

等级 ：人上人
特点：移动端 H5、轻量、支持 Vue2/3、手势与移动组件多。

维度 （优点） （缺陷/不足）
移动端 贴合移动场景 做 PC 不合适

代码场景应用：移动端列表、弹窗、表单、Tab、下拉刷新。

vue 复制代码 
<van-cell-group>
  <van-field v-model="form.phone" label="手机号" placeholder="请输入" />
</van-cell-group>
<van-button type="primary" block @click="onSubmit">提交</van-button>

Naive UI

等级 ：npc
特点：TypeScript 友好、主题变量清晰、Vue3、API 现代。

维度 （优点） （缺陷/不足）
体验与类型 TS 友好、主题清晰 相对较新，案例不如 Element 多

代码场景应用：Vue3 + TS 项目、需要强类型与主题定制的后台。

vue 复制代码 
<n-button type="primary" @click="handleClick">确定</n-button>
<n-data-table :columns="columns" :data="list" />

Material UI (MUI)

等级 ：人上人
特点：Material Design、主题系统强、组件丰富、React 生态。

维度 （优点） （缺陷/不足）
设计与规范 规范统一、主题可配 风格固定，包体不小

代码场景应用：需要 Material 风格的产品、主题定制、复杂布局。

tsx 复制代码 
import { Button, TextField } from '@mui/material';
<Button variant="contained">提交</Button>
<TextField label="用户名" variant="outlined" />

七、构建与工具

Vite

等级 ：夯
特点：ESM 开发、冷启快、HMR 快、生产用 Rollup、配置简单、官方模板多。

维度 （优点） （缺陷/不足）
速度与体验 开发快、配置简单 部分依赖要 optimizeDeps，与 Webpack 生态不完全兼容

代码场景应用：新项目脚手架、Vue/React 官方推荐、需要快速热更的开发体验。

ts 复制代码 
// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': '/src' } },
});

Webpack

等级 ：人上人
特点：entry/output/loader/plugin、生态极大、可深度定制、代码分割与按需加载、Tree Shaking、热更新、多入口与多 chunk。

维度 （优点） （缺陷/不足）
能力与生态 功能全、loader/插件极多、存量项目与文档多 配置复杂、开发构建慢、概念多
定制与迁移 可深度定制打包流程、Webpack 5 持久化缓存等 新项目更倾向 Vite，老项目迁移有成本

代码场景应用：存量 Vue/React 工程、需要复杂 loader（babel/ts/less/vue-loader）、多入口、CDN 与 externals、与后端模板集成。

js 复制代码 
// webpack.config.js
const path = require('path');
module.exports = {
  entry: { main: './src/index.js', admin: './src/admin.js' },
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/assets/',
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: 'index.html' })],
};

ESLint / Prettier

等级 ：npc
特点：静态检查、规则可配置、自动修复、统一风格。

维度 （优点） （缺陷/不足）
规范 提前发现错误、风格统一 规则多，与 Prettier 要配合好

代码场景应用：团队统一规范、提交前检查、与 CI 集成。

json 复制代码 
// .eslintrc
{ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"], "parser": "@typescript-eslint/parser" }

八、工具库

Lodash

等级 ：npc
特点：防抖节流、深拷贝、数组/对象/字符串工具函数全、可按需引入。

维度 （优点） （缺陷/不足）
工具函数 覆盖常见场景 体积大，部分功能现代 JS 已支持

代码场景应用：防抖/节流、深拷贝、数组去重/分组、对象 pick/omit。

ts 复制代码 
import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';
const onSearch = debounce((v: string) => fetchSuggestions(v), 300);
const copied = cloneDeep(original);

day.js

等级 ：npc
特点：轻量、链式 API、格式化/解析/计算、插件扩展。

维度 （优点） （缺陷/不足）
体积与 API 轻量、API 友好 复杂时区要插件或换库

代码场景应用：日期展示、表单日期选择、相对时间（几天前）。

ts 复制代码 
import dayjs from 'dayjs';
dayjs().format('YYYY-MM-DD HH:mm');
dayjs(date).fromNow(); // 需插件 relativeTime

Vue Router / React Router

等级 ：人上人
特点：声明式路由、嵌套路由、守卫、懒加载、与框架集成。

维度 （优点） （缺陷/不足）
路由能力 声明式、守卫、懒加载 动态/权限路由要自己设计

代码场景应用：多页路由、鉴权守卫、路由级懒加载。

ts 复制代码 
// Vue Router
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/user/:id', component: User, beforeEnter: authGuard },
];
// 组件内
const route = useRoute();
router.push({ name: 'User', params: { id: 1 } });
tsx 复制代码 
// React Router
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/user/:id" element={<User />} />
</Routes>

九、小结表（一页速查）

技术 等级 特点（一句话） 典型代码场景
TypeScript 夯 静态类型、接口与泛型 接口/API/组件类型、泛型请求
JavaScript npc 生态最大、灵活、ESM/async 小脚本、无类型项目对接
Vue 顶级 响应式、模板、SFC、Composition API 表单双向绑定、列表、组合式逻辑
React 夯 组件化、Hooks、JSX 函数组件、列表、受控表单
Angular npc 一体化、TS、依赖注入 企业级 SPA、RxJS 集成
UniApp 人上人 Vue 语法、一套代码多端 小程序+H5+App、条件编译、多端活动页
Qiankun 顶级 微前端、主子应用、沙箱隔离 多技术栈合并、老项目渐进迁移、大系统拆子应用
Taro 人上人 React/Vue、多端统一 React 栈小程序/H5/RN、与现有 React 共享逻辑
Redux 人上人 单一数据源、纯函数 reducer 全局状态、多组件共享数据
Redux Toolkit 顶级 createSlice、少样板、RTK Query 同上，现代 React 状态首选
Vuex 拉完了 state/mutation/action、官方旧推 存量 Vue2 项目，新项目用 Pinia
Pinia 顶级 无 mutation、TS 友好、Vue 新官方 用户/权限、多页共享数据
MobX npc 响应式、可观察、写法像普通对象 复杂表单、多字段联动
Axios 顶级 拦截器、取消、封装 统一实例、鉴权、业务 API 封装
Fetch npc 原生、无依赖、Promise 简单 GET、公开接口
React Query 顶级 缓存、stale、重试、乐观更新 列表/详情请求、缓存失效
SWR npc 轻量、stale-while-revalidate 简单数据拉取、Next 配合
Ant Design 顶级 企业级、表格表单全 后台表格、表单、Modal
Element 人上人 Vue、组件全、后台风 Vue 后台、表格、表单、弹窗
Vant 人上人 移动端 H5、轻量 移动列表、表单、Tab
Naive UI npc TS 友好、Vue3、主题清晰 Vue3+TS 后台、主题定制
Material UI 人上人 Material Design、主题强 Material 风格产品、复杂布局
SCSS 人上人 变量、mixin、嵌套 主题变量、BEM、公共 mixin
Tailwind 顶级 原子类、按需 布局、间距、响应式
Vite 夯 ESM、冷启快、HMR 新项目、Vue/React 官方栈
Webpack 人上人 entry/loader/plugin、生态大 存量项目、多入口、复杂打包与 loader
ESLint/Prettier npc 静态检查、自动修复、统一风格 团队规范、提交前检查、CI
Lodash npc 工具函数全 防抖节流、深拷贝、数组/对象操作
day.js npc 轻量、链式 日期格式化、相对时间
Vue/React Router 人上人 声明式路由、守卫、懒加载 多页路由、鉴权、懒加载

技术选型没有银弹：看清每项技术的等级 、特点 、夯 与拉 ，再结合代码场景落地，才能既顺手又少踩坑。

相关推荐
烟雨落金城1 小时前
初识Electron,谈谈感悟
前端
jeff渣渣富1 小时前
Taro 小程序构建自动化：手写插件实现图片自动上传 OSS 并智能缓存
前端·webpack
恋猫de小郭2 小时前
谷歌 Genkit Dart 正式发布：现在可以使用 Dart 和 Flutter 构建全栈 AI 应用
android·前端·flutter
vim怎么退出3 小时前
谷歌性能优化知识点总结
前端
专业抄代码选手3 小时前
在react中，TSX是如何转变成JS的
前端·javascript
葡萄城技术团队3 小时前
【实践篇】从零到一：手把手教你搭建一套企业级 SpreadJS 协同设计器
前端
忆江南4 小时前
# iOS Block 深度解析
前端
米丘4 小时前
vue-router v5.x 路由模式关于 createWebHistory、 createWebHashHistory的实现
前端
本末倒置1834 小时前
Bun 内置模块全解析：告别第三方依赖，提升开发效率
前端·javascript·node.js
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06Window 10部署openclaw报错node.exe : npm error code 12807OpenClaw 接入 QQ Bot 完整实践指南08OpenClaw macOS 完整安装与本地模型配置教程（实战版）09npm-error code 128问题解决方法10得物前端部门，没了