从原生 JS 到 Vue 与 React：前端开发的演进之路

然我
1 阅读5分钟

在前端开发的早期，开发者主要依赖原生 JavaScript 进行 DOM 操作、样式管理与事件绑定。但随着 Web 应用日益复杂，这种“刀耕火种式”的开发方式逐渐暴露出低效、难维护的问题。现代前端框架如 Vue 和 React 应运而生，极大地提升了开发效率，让开发者可以专注于业务逻辑而非底层 API 的使用。

本文将带你通过具体示例，逐步了解如何从原生 JS 迁移到 Vue 和 React，并掌握背后的设计思想。

一、语义化标签：构建结构清晰的页面

HTML5 引入了大量语义化标签（如 <table>、<thead>、<tbody>、<tr>、<th> 等），这些标签不仅提高了代码可读性，也增强了网页的语义表达能力，便于搜索引擎理解和辅助工具访问。

示例：使用语义化表格结构展示数据

<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>家乡</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态内容区域 -->
  </tbody>
</table>
  • <thead> 表头部分；
  • <tbody> 表体部分，用于动态插入数据；
  • <tr> 行；
  • <th> 表头单元格；
  • <td> 数据单元格。

这种方式使页面结构清晰、易于维护，同时也方便后续接入 CSS 框架或 JavaScript 框架。

二、原生 JS：DOM 编程实现数据动态渲染

原生 JS 的 DOM 编程是动态更新页面的最基本手段。例如以下代码展示了如何使用原生 JS 渲染数据表格：

<div class="container">
  <table id="friends" class="table table-striped">
    <thead>
      <tr>
        <th>姓名</th>
        <th>家乡</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
  const oBody = document.querySelector("#friends tbody");

  const friends = [
    { name: "张三", hometown: "北京" },
    { name: "李四", hometown: "上海" }
  ];

  // 使用模板字符串拼接 HTML 并注入
  oBody.innerHTML = friends.map(friend => `
    <tr>
      <td>${friend.name}</td>
      <td>${friend.hometown}</td>
    </tr>
  `).join("");
</script>

原生 JS 的局限性：

  1. 手动操作 DOM：频繁地调用 querySelector, innerHTML 容易出错；
  2. 数据与视图耦合严重：数据变更时需手动重新渲染；
  3. 难以维护扩展：数据量大或交互复杂时，代码冗长且不易管理；
  4. 缺乏模块化和组件化思维：不利于大型项目协作。

三、样式处理：借助第三方框架提升效率

为了减少重复造轮子的工作，我们可以使用成熟的 CSS 框架如 Bootstrap，它提供了一系列预定义的类名和组件，快速搭建美观一致的 UI。

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

常用类名说明：

  • .container：固定宽度的容器；
  • .table：基础表格样式；
  • .table-striped：带斑马纹的表格；
  • .btn、.form-control 等：表单和按钮控件。

使用如 .container 和 .table 等类名，我们可以快速搭建一个美观且一致的 UI：

<body>
    <!-- 页面容器 -->
    <div class="container">
        <h1 class="text-center">我的好友列表</h1>

        <!-- 按钮示例 -->
        <p class="text-center">
            <button class="btn btn-primary">添加好友</button>
        </p>

        <!-- 表格示例 -->
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>家乡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>上海</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

image.png

image.png 无需从头写样式，让开发者聚焦业务本身。

四、Vue：声明式开发，关注业务逻辑

Vue 是一个轻量、渐进式的前端框架，核心特点是 响应式数据绑定 和 声明式编程，非常适合中小型项目快速开发。

示例代码：

<div id="app">
  <h1>{{ title }}</h1>
  <table class="table table-striped">
    <thead>
      <tr><th>姓名</th><th>家乡</th></tr>
    </thead>
    <tbody>
      <tr v-for="friend in friends">
        <td>{{ friend.name }}</td>
        <td>{{ friend.hometown }}</td>
      </tr>
    </tbody>
  </table>
</div>

const App = {
  data() {
    return {
      title: 'ECUT 未来之星',
      friends: [
        { name: "张三", hometown: "宜春" },
        { name: "李四", hometown: "吉安" }
      ]
    };
  }
};

Vue.createApp(App).mount('#app');

优势：

  1. 响应式数据绑定：数据变化自动触发视图更新；
  2. 指令系统：如 v-for、v-if、v-model 等简化模板逻辑；
  3. 组件化设计：支持构建可复用的 UI 组件；
  4. 生命周期钩子：控制组件创建、更新、销毁等过程；
  5. 开箱即用：官方提供了 Vue Router、Vuex 等配套工具，满足中大型应用需求。

五、React：构建大型应用的利器

React 是由 Facebook 推出的组件化前端框架，擅长构建复杂的用户界面。其核心是 组件 和 状态管理。

初始化项目：

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

组件示例：

function App() {
  const friends = [
    { name: "王五", hometown: "广州" },
    { name: "赵六", hometown: "深圳" }
  ];

  return (
    <div className="container">
      <h1>React 示例</h1>
      <table className="table table-striped">
        <thead>
          <tr><th>姓名</th><th>家乡</th></tr>
        </thead>
        <tbody>
          {friends.map((friend, index) => (
            <tr key={index}>
              <td>{friend.name}</td>
              <td>{friend.hometown}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

React 的特点：

  1. JSX 语法：允许在 JavaScript 中直接书写类似 HTML 的结构；
  2. 虚拟 DOM 技术：高效比较差异，减少真实 DOM 操作；
  3. 组件驱动开发：UI 被拆分为多个独立、可复用的组件；
  4. 强大的生态系统：React Router、Redux、Context API、Hooks 等支撑大型应用；
  5. 跨平台能力：React Native 可用于移动端开发。

六、总结：为何选择现代框架

特性原生 JSVueReact
编程方式命令式声明式声明式
DOM 操作手动自动绑定数据虚拟 DOM 自动更新
学习曲线简单简单易学需要了解 JSX、状态管理等
适用场景小项目、练习中小型项目、快速开发中大型项目、复杂逻辑
社区和生态基础丰富超丰富

现代框架的核心理念：

  • 远离底层 API：不再关注 innerHTML 或 addEventListener；
  • 聚焦业务逻辑：将精力放在“如何组织数据”、“如何划分组件”、“如何处理状态”等更高层次的问题上；
  • 组件化 + 响应式：提高代码复用率、降低维护成本；
  • 工程化思维：模块化、工程化、可测试性强，适应团队协作和持续集成。

结语

从前端开发的演进历程来看，从原生 JS 到 Vue 和 React，不仅是工具的升级，更是开发思维和工程方法的跃迁。现代框架帮助我们摆脱繁琐的 DOM 操作，转而专注于构建高质量、可维护、可扩展的 Web 应用。无论你是刚入门的新手，还是希望转型的前端工程师，掌握 Vue 或 React 都是迈向职业成长的重要一步。

avatar
文章
阅读
粉丝