从原生 JS 到 Vue,再到 React:前端框架演进与实战上手指南

在前端开发的世界里,我们从最初的"刀耕火种"------原生 JavaScript,一步步迈向了现代化框架主导的开发模式。本文将带你回顾原生 JS 的方式,理解 Vue 和 React 在开发体验、效率和项目结构上的巨大提升,并带你快速上手一个基于 Vite 的 React 应用。


一、语义化标签:写给人看的结构化 HTML

无论用什么框架,HTML 的语义化始终是前端开发的基础。

我们常见的结构,比如一个展示数据的表格,使用语义化标签能更清晰地表达内容的结构和层次:

css 复制代码
    <table id="friends" class="table table-striped">
      <thead>
        <tr>
          <th>姓名</th>
          <th>家乡</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>lxw</td>
          <td>九江</td>
        </tr>
        <tr>
          <td>lh</td>
          <td>赣州</td>
        </tr>
      </tbody>
    </table>

我们可以在数据当中找到挂载点,


二、原生 JS 的 DOM 编程:低效但直观

还记得这段代码吗?

ini 复制代码
const table = document.createElement('table');
const tr = document.createElement('tr');
const td = document.createElement('td');
td.innerText = '张三';
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);

这就是"刀耕火种"的时代 ------ 手动创建、拼接 DOM 节点。这样的代码冗长、易错,难以维护。


三、样式框架提升用户体验

为了减少样式的重复劳动,我们引入了像 Bootstrap 这样的 CSS 框架:

  • .container:统一容器宽度
  • .table:内置表格样式
  • .btn:按钮样式统一

这些框架让我们不再为每一个按钮、每一张表格重复写 CSS,从而把精力集中在"业务逻辑"上。


四、让框架替我们做事:Vue 篇

Vue 的出现让开发者从繁杂的 DOM 操作中解放出来:

通过 v-for,我们无需手动创建每一个 DOM 节点,Vue 会根据数据变化自动更新界面。这种 响应式数据驱动视图 的方式,真正让我们"专注于业务"。

Vue 的核心目标:远离底层 API,聚焦业务逻辑。

scss 复制代码
Vue.createApp(App).mount('#app');

你只需要关心 App 里写什么,其他的交给框架。


五、React:适合大型应用的构建框架

React 是由 Facebook 推出的现代化前端框架,更适合构建复杂的、组件化的大型应用。

快速创建 React 应用(基于 Vite)

csharp 复制代码
npm init vite

选择 React 模板,一键生成项目结构。项目启动只需:

arduino 复制代码
cd your-project-name
npm install
npm run dev

你就会看到熟悉的 React 启动页面!

六、前端框架演进总结

特性 原生 JS Vue React
DOM 操作 手动拼接 数据驱动 数据驱动
模板语法 模板+指令 JSX
上手门槛 适中 略高
适用场景 简单页面 中小型项目 大型复杂项目
性能优化 手动处理 内建响应式 虚拟 DOM + Hooks

七、写在最后

如果你还在用原生 JS 拼页面,不妨从 Vue 或 React 开始,体验一次框架化开发带来的高效与乐趣。

前端的发展日新月异,但从底层 DOM 到现代框架的演进思路永不过时

相关推荐
Mintopia2 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼21 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~23 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务26 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛26 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑29 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭35 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿40 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter