Vue 与 React 初体验：从刀耕火种到现代前端开发的奇妙之旅对比了原生JS与Vue/React框架的开发体验，详细

前言：从"切图崽"到前端工程师的进化之路

前端最开始的时候，大家都戏称自己为"切图崽"——整天与HTML、CSS和一点点JavaScript打交道，用最原始的方式拼凑页面。那时候，大家都是手动操作DOM节点，用document.createElement和appendChild来动态更新界面，就像用石器时代的工具建造摩天大楼。

随着Web应用变得越来越复杂，这种"刀耕火种"的开发方式已经无法满足需求。这时候，Vue和React等现代前端框架应运而生，它们让我们能够聚焦于业务逻辑，而不是纠结于底层的DOM操作。

在这篇文章中，我将分享我从原生JS到Vue和React的转变历程，以及React响应式编程的初体验。无论你是刚入门的前端新手，还是正在考虑转向现代前端框架的开发者，相信这些内容都会对你有所启发。

一、原生JS的"石器时代"

1.1 语义化标签：表格的"原始"写法

在原生JS时代，我们是这样创建一个表格的：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>前端工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>UI设计师</td>
    </tr>
  </tbody>
</table>

这种写法虽然直观，但当数据需要动态更新时，我们就不得不手动操作DOM，写出一大堆重复且难以维护的代码。

1.2 DOM编程：手动更新界面的痛苦

假设我们有一个朋友列表需要动态显示，原生JS的写法可能是这样的：

// 获取DOM元素
const tbody = document.querySelector('tbody');

// 数据
const friends = [
  { name: '张三', age: 25, job: '前端工程师' },
  { name: '李四', age: 30, job: 'UI设计师' }
];

// 动态生成表格行
function renderFriends() {
tbody.innerHTML = friends.map(friend =>
            `<tr>
            <td>${friend.name}</td>
            <td>${friend.age}</td>
            </tr>`
        ).join('');
}

// 初始渲染
renderFriends();

// 添加新朋友
function addFriend(newFriend) {
  friends.push(newFriend);
  renderFriends(); // 需要手动重新渲染
}

这种方式有几个明显的缺点：

需要手动管理DOM更新
数据和视图的同步需要开发者自己维护
代码重复且难以维护
性能不佳，每次更新都需要重新渲染整个列表

1.3 样式管理：Bootstrap的救赎

在样式方面，我们通常会引入Bootstrap这样的CSS框架来简化开发：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <table class="table table-striped table-hover">
    <!-- 表格内容 -->
  </table>
</div>

Bootstrap提供了现成的样式和组件，让我们能够快速搭建出美观的界面。但它仍然解决不了数据与视图同步的核心问题。

二、Vue的初体验：响应式的魅力

2.1 从"切图崽"到应用开发工程师

Vue的出现彻底改变了前端开发的范式。它让我们从"切图崽"进化成了"应用开发工程师"。我们不再需要关心DOM操作的具体细节，而是可以专注于业务逻辑的实现。

一个最简单的Vue应用长这样：

<body>
    <div class="container" id="app">
        <h1>{{ title }}</h1>
        <table id="friends" 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.age }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
    <script>
        // 做一个App
        const App = {
            // 申明数据的业务
            data() {
                return {
                    title: 'Fog',
                    friends: [
                        { name: '张三', age: 18 },
                        { name: '李四', age: 20 },
                        { name: '王五', age: 22 }
                    ] 
                }
            }
        }
        // 挂载点  把App 挂载到页面的挂载点上
        Vue.createApp(App).mount('#app');
    </script>
</body>

三、React初体验：函数式的力量

3.1 创建React应用

React由Facebook开发，特别适合构建大型应用。要创建一个React应用，我们可以使用Vite：

npm init vite
# 输入项目名称（如friends）
# 选择React
# 选择JavaScript
cd friends
npm install
npm run dev

这个命令会创建一个基本的React项目结构，并启动开发服务器（通常在5173端口）。

3.2 第一个React组件

React的核心思想是组件化。组件是完成开发任务的最小单元，它将HTML、CSS和JavaScript组合在一起。在React中，组件就是一个函数：

function App() {
  const todos = ['吃饭', '睡觉', '打豆豆'];
  
  return (
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>任务</th>
        </tr>
      </thead>
      <tbody>
        {todos.map((item, index) => (
          <tr>
            <td>{index + 1}</td>
            <td>{item}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default App;

这个简单的组件展示了React的几个特点：

JSX语法：允许在JavaScript中写HTML
组件是函数：返回要渲染的内容
数据驱动：使用JavaScript表达式动态生成内容

3.3 React的响应式状态管理

React使用useState钩子来管理组件的状态（数据）：

import { useState } from 'react';

function App() {
  const [todos, setTodos] = useState(['吃饭', '睡觉', '打豆豆']);
  
  // 3秒后更新数据
  setTimeout(() => {
    setTodos(['吃饭', '睡觉', '打豆豆', '养鱼']);
  }, 3000);
  
  return (
    <div>
      <h1 className="title">任务列表</h1>
      <table>
        {/* 同上 */}
      </table>
    </div>
  );
}

useState返回一个数组，包含两个元素：

当前的状态值（如todos）
更新状态的函数（如setTodos）

当调用setTodos更新状态时，React会自动重新渲染组件，显示最新的数据。

四、Vue vs React：设计哲学比较

虽然Vue和React都是现代前端框架，但它们在设计哲学上有一些差异：

特性	Vue	React
设计目标	渐进式框架，易于上手	构建大型应用，灵活性高
模板语法	基于HTML的模板	JSX（JavaScript扩展）
状态管理	响应式系统自动追踪依赖	需要手动管理状态更新
学习曲线	相对平缓	较陡峭，需要理解更多概念
社区生态	官方维护的路由、状态管理方案	社区驱动的解决方案更多

4.1 Vue的优势

更简单的学习曲线：对于初学者来说，Vue的模板语法更接近传统HTML，更容易上手
更完整的官方生态：Vue Router、Vuex/Pinia等都由官方维护
更"贴心"的API设计：如计算属性、侦听器等，减少样板代码

4.2 React的优势

更灵活的JSX语法：JSX本质上就是JavaScript，可以充分利用JavaScript的表达能力
更纯粹的JavaScript：不需要学习特定的模板语法
更大的生态系统：由于更早发布，React有更丰富的第三方库
更适合大型应用：Facebook自身的实践验证了React在大规模应用中的表现

五、现代前端开发的全景图

从原生JS到框架的转变，反映了前端开发的演进历程：

切图崽阶段：HTML + CSS + 简单JS（DOM操作）
前端工程师阶段：掌握Vue/React等框架，开发复杂Web应用
全栈开发阶段：Node.js + 数据库，前后端通吃
移动开发阶段：React Native开发跨平台移动应用
AI全栈阶段：结合AIGC等AI技术，开发智能应用

6.1 为什么选择框架？

现代前端框架解决了几个核心问题：

声明式编程：描述"UI应该是什么样子"，而不是"如何更新UI"
组件化：将UI拆分为独立、可复用的组件
状态管理：集中管理应用状态，简化数据流
虚拟DOM：高效更新界面，优化性能

6.2 未来趋势

服务器组件：React正在探索的服务器组件概念，将部分渲染逻辑移到服务器端
微前端：将大型应用拆分为多个独立开发和部署的小型应用
WebAssembly：让前端能够运行更高性能的代码
AI集成：如GitHub Copilot等工具正在改变我们的开发方式

结语：拥抱变化，持续学习

从原生JS到Vue/React的转变，不仅仅是技术栈的变化，更是一种思维方式的升级。现代前端框架让我们能够更专注于业务逻辑，而不是底层的DOM操作。

无论你选择Vue还是React，重要的是理解它们背后的设计哲学和核心概念。前端技术日新月异，但基础概念（如组件化、状态管理、响应式编程）是相通的。

记住，框架只是工具，解决问题的思路和能力才是开发者最宝贵的财富。保持好奇心，持续学习，你就能在这个快速变化的领域中找到自己的位置。

最后，分享一句我很喜欢的话："昨天的最佳实践可能是今天的反模式，而今天的疯狂想法可能是明天的标准做法。"在前端开发的世界里，唯一不变的就是变化本身。让我们拥抱变化，享受编码的乐趣吧！