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

像我这样帅的人丶你还
0 阅读13分钟

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

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

摘要

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

一、语言与工程化

TypeScript

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

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

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

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

SCSS / Sass

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

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

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

// 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 易臃肿

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

<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

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

<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、列表与条件渲染、受控表单。

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 请求封装。

@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。

<!-- 页面结构多端通用 -->
<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，深层次问题排查成本高

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

// 主应用注册子应用
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();

// 子应用（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 项目共享逻辑。

// 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、不可变更新、中间件、时间旅行调试。

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

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

// 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。

const store = configureStore({ reducer: { counter: counterReducer } });
// 组件中
dispatch(increment());

Vuex

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

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

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

// 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 按功能拆分。

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 直观

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

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。

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、不依赖统一鉴权的静态或公开接口。

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 的缓存与失效。

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 少

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

const { data, error, mutate } = useSWR('/api/user', fetcher);

六、UI 组件库

Ant Design (antd)

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

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

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

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 后台、表格、表单、对话框、消息提示。

<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、下拉刷新。

<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 项目、需要强类型与主题定制的后台。

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

Material UI (MUI)

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

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

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

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

七、构建与工具

Vite

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

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

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

// 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、与后端模板集成。

// 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 集成。

// .eslintrc
{ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"], "parser": "@typescript-eslint/parser" }

八、工具库

Lodash

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

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

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

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 友好复杂时区要插件或换库

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

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

Vue Router / React Router

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

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

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

// 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 } });

// React Router
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/user/:id" element={<User />} />
</Routes>

九、小结表（一页速查）

技术等级特点（一句话）典型代码场景
TypeScript夯静态类型、接口与泛型接口/API/组件类型、泛型请求
JavaScriptnpc生态最大、灵活、ESM/async小脚本、无类型项目对接
Vue顶级响应式、模板、SFC、Composition API表单双向绑定、列表、组合式逻辑
React夯组件化、Hooks、JSX函数组件、列表、受控表单
Angularnpc一体化、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 新官方用户/权限、多页共享数据
MobXnpc响应式、可观察、写法像普通对象复杂表单、多字段联动
Axios顶级拦截器、取消、封装统一实例、鉴权、业务 API 封装
Fetchnpc原生、无依赖、Promise简单 GET、公开接口
React Query顶级缓存、stale、重试、乐观更新列表/详情请求、缓存失效
SWRnpc轻量、stale-while-revalidate简单数据拉取、Next 配合
Ant Design顶级企业级、表格表单全后台表格、表单、Modal
Element人上人Vue、组件全、后台风Vue 后台、表格、表单、弹窗
Vant人上人移动端 H5、轻量移动列表、表单、Tab
Naive UInpcTS 友好、Vue3、主题清晰Vue3+TS 后台、主题定制
Material UI人上人Material Design、主题强Material 风格产品、复杂布局
SCSS人上人变量、mixin、嵌套主题变量、BEM、公共 mixin
Tailwind顶级原子类、按需布局、间距、响应式
Vite夯ESM、冷启快、HMR新项目、Vue/React 官方栈
Webpack人上人entry/loader/plugin、生态大存量项目、多入口、复杂打包与 loader
ESLint/Prettiernpc静态检查、自动修复、统一风格团队规范、提交前检查、CI
Lodashnpc工具函数全防抖节流、深拷贝、数组/对象操作
day.jsnpc轻量、链式日期格式化、相对时间
Vue/React Router人上人声明式路由、守卫、懒加载多页路由、鉴权、懒加载

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

avatar
文章
阅读
粉丝