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