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

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

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

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

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

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

html 复制代码
<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 渲染数据表格:

html 复制代码
<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。

html 复制代码
<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:

html 复制代码
<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>

无需从头写样式,让开发者聚焦业务本身。


四、Vue:声明式开发,关注业务逻辑

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

示例代码:

html 复制代码
<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>
js 复制代码
const App = {
  data() {
    return {
      title: 'ECUT 未来之星',
      friends: [
        { name: "张三", hometown: "宜春" },
        { name: "李四", hometown: "吉安" }
      ]
    };
  }
};

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

优势:

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

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

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

初始化项目:

bash 复制代码
npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

组件示例:

jsx 复制代码
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 可用于移动端开发。

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

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

现代框架的核心理念:

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

结语

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

相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Sheldon一蓑烟雨任平生4 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233405 小时前
React组件完全指南
前端·javascript·react.js
qq7798233406 小时前
React Hooks完全指南
前端·javascript·react.js
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead6 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
YUELEI1186 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript