JavaScript框架是解决DOM更新、状态管理与团队协作问题的约定;Vue通过响应式劫持实现数据驱动视图,React依赖Hooks调用顺序与依赖数组保证渲染一致性;选型应基于项目现状、团队习惯与生态适配。

JavaScript 框架不是“必须学”的工具,而是解决特定问题的协作约定——当你需要频繁更新 DOM、管理跨组件状态、或支撑多人长期维护的前端项目时,Vue 和 React 才真正显出价值。
为什么原生 JS 写中大型页面会越来越难
手动操作 document.getElementById、监听一堆 addEventListener、反复拼接字符串模板,短期内能跑通,但很快会出现这些现象:
- 数据变了,但页面没更新,或者更新了两次(状态和视图不同步)
- 一个按钮点击要改三个地方的样式、触发两个 API、再通知侧边栏刷新——逻辑散落在各处
- 新加一个筛选条件,得去翻 5 个文件找数据流向,最后发现是某个闭包里偷偷改了共享变量
框架的核心作用,就是用可预测的规则(比如响应式依赖追踪、单向数据流)把这种混乱收束住。
Vue 的响应式更新到底在做什么
它不是魔法,本质是劫持了对象属性的 get/set(Vue 3 改用 Proxy),让每次读取或赋值都能被记录和触发。但要注意几个实际约束:
立即学习“Java免费学习笔记(深入)”;
- 初始化时不存在的属性不会被响应式追踪,必须用
Vue.set或reactive显式声明 - 数组索引直接赋值(如
arr[0] = 'x')不会触发更新,得用splice或Vue.set -
ref和reactive行为不同:前者包装基础类型,后者只处理对象,混用容易漏掉响应
这不是缺陷,而是框架为性能做的取舍——它不帮你监控所有可能变化,只监控你明确交给它的部分。
React 的 useState 和 useEffect 为什么不能乱写
它们依赖调用顺序和依赖数组的严格一致性。常见翻车点:
- 在
if或for里调用useState→ 报错 “Rendered more hooks than during the previous render” -
useEffect里读了 props 但没写进依赖数组 → 拿到的是旧值(闭包陷阱) - 写了
[props.id]却忘了props是对象引用,导致 effect 不触发 → 应该解构或用useMemo缓存
这些限制不是为了为难你,而是让 React 能安全地复用组件实例、跳过不必要的重渲染。
选 Vue 还是 React?先看团队和场景
没有绝对优劣,但现实差异很实在:
- 已有大量 jQuery 项目要渐进升级?
Vue的模板语法和指令(v-if、v-model)更平滑 - 需要深度定制 UI 组件库、或已用 TypeScript + 函数式编程习惯?
React的 JSX 和 Hooks 组合更灵活 - 团队对构建工具不熟,又想快速上线?
Vue的单文件组件(.vue)开箱即用;React往往要配webpack或Vite才能支持 JSX
真正卡住人的往往不是框架本身,而是配套生态的理解断层:比如 Vue Router 的导航守卫怎么拦截未登录请求,或者 React Query 的 staleTime 和 cacheTime 差异——这些细节不踩一遍坑,文档根本看不出重点。











