从原生 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 到现代框架的演进思路永不过时

相关推荐
yinuo2 小时前
你的网页还不会"看人"?3分钟让它拥有会追踪的眼睛
前端
守正出琦3 小时前
带代码示例的 HTML 标签实操手册
前端·html
yume_sibai3 小时前
HTML HTML5基础(1)
前端·html·html5
XianZhe_3 小时前
Pug 哈巴狗 便捷的HTML预处理器 上
前端·html·pug·html预处理器
yume_sibai3 小时前
HTML HTML5基础(2)
前端·html·html5
守正出琦3 小时前
HTML 常用标签速查表
前端·javascript·html
吃饺子不吃馅3 小时前
Canvas实现协同电影选座
前端·架构·canvas
前端慢慢其修远4 小时前
fabric.js 中originX originY center设置问题
前端·fabric
im_AMBER4 小时前
React 04
前端·react.js·前端框架·1024程序员节
fhsWar5 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js