在前端开发的早期，开发者主要依赖原生 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 的局限性：
- 手动操作 DOM ：频繁地调用
querySelector,innerHTML容易出错； - 数据与视图耦合严重：数据变更时需手动重新渲染；
- 难以维护扩展：数据量大或交互复杂时，代码冗长且不易管理；
- 缺乏模块化和组件化思维：不利于大型项目协作。
三、样式处理：借助第三方框架提升效率
为了减少重复造轮子的工作，我们可以使用成熟的 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');优势：
- 响应式数据绑定：数据变化自动触发视图更新；
- 指令系统 ：如
v-for、v-if、v-model等简化模板逻辑； - 组件化设计：支持构建可复用的 UI 组件；
- 生命周期钩子：控制组件创建、更新、销毁等过程；
- 开箱即用：官方提供了 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 的特点：
- JSX 语法：允许在 JavaScript 中直接书写类似 HTML 的结构；
- 虚拟 DOM 技术：高效比较差异，减少真实 DOM 操作；
- 组件驱动开发：UI 被拆分为多个独立、可复用的组件；
- 强大的生态系统：React Router、Redux、Context API、Hooks 等支撑大型应用；
- 跨平台能力：React Native 可用于移动端开发。
六、总结：为何选择现代框架
| 特性 | 原生 JS | Vue | React |
|---|---|---|---|
| 编程方式 | 命令式 | 声明式 | 声明式 |
| DOM 操作 | 手动 | 自动绑定数据 | 虚拟 DOM 自动更新 |
| 学习曲线 | 简单 | 简单易学 | 需要了解 JSX、状态管理等 |
| 适用场景 | 小项目、练习 | 中小型项目、快速开发 | 中大型项目、复杂逻辑 |
| 社区和生态 | 基础 | 丰富 | 超丰富 |
现代框架的核心理念：
- 远离底层 API ：不再关注
innerHTML或addEventListener； - 聚焦业务逻辑：将精力放在"如何组织数据"、"如何划分组件"、"如何处理状态"等更高层次的问题上；
- 组件化 + 响应式：提高代码复用率、降低维护成本；
- 工程化思维：模块化、工程化、可测试性强，适应团队协作和持续集成。
结语
从前端开发的演进历程来看，从原生 JS 到 Vue 和 React，不仅是工具的升级，更是开发思维和工程方法的跃迁。现代框架帮助我们摆脱繁琐的 DOM 操作，转而专注于构建高质量、可维护、可扩展的 Web 应用。无论你是刚入门的新手，还是希望转型的前端工程师，掌握 Vue 或 React 都是迈向职业成长的重要一步。