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

胡gh
170 阅读7分钟

引言：从原生到框架，前端开发的进化之路

在前端开发的世界里，我们常常会经历这样一个过程：

一开始，我们用 HTML 写结构，CSS 做美化，JavaScript 实现交互。这三者像是前端世界的“铁三角”，缺一不可。

但随着业务需求的复杂化，我们会发现，仅靠原生 JavaScript 操作 DOM 来实现动态页面，不仅效率低，还容易出错。比如，当我们需要将一个 JSON 数据渲染成表格时，必须手动创建元素、插入节点、绑定数据……这个过程就像是一场“体力劳动”。

于是我们开始思考：有没有一种更聪明的方式，让我们专注于业务本身，而不是频繁地和 DOM API 打交道？

答案是肯定的 —— Vue 和 React 的出现，彻底改变了前端开发的方式。它们带来了“声明式编程”的理念，让开发者只需关注数据的变化，而无需操心视图如何更新。

初识前端：从前端“切图崽”到“开发工程师”

还记得最开始学前端的时候吗？
我们用 HTML 写结构，CSS 美化页面，JS 实现一点交互。那时候写代码，就像在搭积木：

  • 拿着设计图，一行行写 HTML；
  • 调整样式，一个像素一个像素地对齐；
  • 最后写点 JS，让按钮能动起来。

但写着写着你会发现一个问题：JS 太底层了，很多重复操作太麻烦，效率低不说，还容易出错。

比如我们要动态展示一个朋友列表：

const ul = document.getElementById('friends');
friends.forEach(friend => {
  const li = document.createElement('li');
  li.innerHTML = `${friend.name} - <i>${friend.hometown}</i>`;
  ul.appendChild(li);
});

这段代码虽然能跑通，但它的问题也很明显：

  • 需要手动操作 DOM；
  • 数据变了得重新渲染；
  • 业务逻辑和视图混在一起，难以维护。

于是我们开始思考：有没有一种方式，能让 JS 更聪明一点，让我们专注于业务本身，而不是频繁操作 DOM API？

答案是肯定的 —— Vue 和 React 就是为此而生的。

进阶第一步：告别 DOM 操作，拥抱框架思维

语义化标签：结构清晰，一目了然

HTML 一开始就是为了展示数据而生的，比如我们常用的表格结构：

<table>
  <thead>
    <tr><th>姓名</th><th>家乡</th></tr>
  </thead>
  <tbody id="friends">
    <!-- 动态插入的地方 -->
  </tbody>
</table>

以前我们得用 JS 手动去 appendChild，现在呢？Vue 或 React 告诉我们：

“你只管把数据告诉我，剩下的我来搞定。”

这就是现代框架的魅力：数据驱动视图。

DOM 编程：别再做“体力活”，交给框架来做

原生 JS 的 DOM 操作就像搬砖，你需要知道：

  • 哪个节点是容器？
  • 怎么创建元素？
  • 怎么插入进去？
  • 数据变了要不要删掉重来？

而使用 Vue 或 React 后，这些“脏活累活”都由框架来完成，你只需要：

  1. 定义数据（如：friends）；
  2. 描述模板（如：循环显示每个朋友）；
  3. 框架自动帮你更新界面！

第三方库加持：专注业务，不是重复造轮子

除了框架本身，还有各种成熟的 UI 库帮助我们提升开发效率：

  • Bootstrap：快速搭建 PC 端界面；
  • Element UI / Ant Design：企业级组件库；
  • Tailwind CSS：灵活的原子类样式库；

这些工具让我们可以把精力放在真正重要的事情上 —— 实现业务功能，而不是重复造轮子。

从原生到 Vue：聚焦业务，远离 API

Vue 初体验：声明式编程的魅力

Vue 是一个渐进式的框架，它的核心思想很简单：

数据变化 → 视图自动更新

来看一个简单的例子：

 <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.hometown}}</td>
           </tr>
        </tbody>
       </table>    
        </div>

1. 数据驱动视图

Vue 允许开发者将数据和视图进行绑定，当数据发生变化时，视图会自动更新。在代码中，App 对象的 data 方法返回一个包含 title 和 friends 的对象，这些数据通过 {{ }} 语法绑定到 HTML 模板中。当 data 中的数据发生变化时，页面上对应的内容会自动更新。

<h1>{{title}}</h1>
<tr v-for="friend in friends">
    <td>{{friend.name}}</td>
    <td>{{friend.hometown}}</td>
</tr>

2. 指令系统

Vue 提供了一系列指令，用于扩展 HTML 的功能。例如，v-for 指令用于循环渲染列表，在代码中，v-for="friend in friends" 会遍历 friends 数组，并为数组中的每个元素生成一个  元素。

<tr v-for="friend in friends">
    <td>{{friend.name}}</td>
    <td>{{friend.hometown}}</td>
</tr>

3. 组件化开发

从原生到 React：函数式组件与响应式状态

React 的理念是“一切皆组件”，它更偏向函数式编程：

React 组件：一个函数返回一段 HTML

import React, { useState } from 'react';

function App() {
const todos =['eat','sleep','code'];//数组-》数据
  return (
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>任务</th>
        </tr>
      </thead>
      <tbody>
        {
          //动态页面
          //js DOM编程API
          //在html里面写js代码
          todos.map((item,index)=>(
          <tr>
            <td>{index+1}</td>
            <td>{item}</td>
          </tr>
          )
            )}
      </tbody>
    </table>
    </>
  )
}

react 中返回值是html中的标签，react中的函数叫函数组件，App组件 组合其他的组件完成应用。

结合scrpit中data的内容，并用vue.mount将数据挂载到相应的DOM节点上得

        const App = {
            //声明数据的业务
            data(){
                return {
                    title:'未来之星',
                    friends:[
                        {"name":'游志兴',"hometown":'花果山'},
                        {"name":'张升丰',"hometown":'hq的心里'},
                        {"name":'柳若智',"hometown":'zq的心里'},
                        {"name":'曾智',"hometown":'四海为家'},
                    ]
                }
            }
        }
        Vue.createApp(App).mount('#app')
        </script>

image.png

tips：react比vue更纯粹

响应式数据：useState 控制状态变化

React 提供了 useState Hook 来管理状态：

const [todos,setTodos] =useState(['装作不在意','夜里偷偷哭泣','看着聊天记录遗憾']);
  const [title,setTitle] =useState('zz喜欢wll');
  • todos 是当前的数据；
  • setTodos 是修改数据的方法；(title同)
  • 数据一变，React 自动更新界面。

这就实现了真正的“数据驱动视图”。

工程化起步：npm + Vite + 项目初始化

有了 Vue 和 React，我们可以不再纠结于底层 API，而是专注于构建产品。那怎么开始一个项目呢？

npm：Node 包管理器

npm 就像前端世界的“App Store”，我们可以用它安装各种工具和依赖。

npm install react

Vite：新一代前端构建工具

Vite 帮我们快速创建项目模板，支持 Vue、React 等主流框架：

npm create vite@latest my-app

选择框架（React）、语言（JavaScript），然后一路回车，你就得到了一个项目模板。

接着：

cd my-app
npm install
npm run dev

你的项目就跑起来了，访问 http://localhost:5174，就可以看到 React 或 Vue 的初始页面。

同时可以用setTime构造动态页面

 setTimeout(()=>{
    setTodos(['假装不在意','夜里偷偷哭泣','看着聊天记录遗憾','继续装作不在意']);
    setTitle('zz很难过,因为zz失败了')
  },3000)

在index.css文件里简化页面后得到:

image.png

image.png

总结一句话：

从原生 JS 到 Vue/React，是一个从“搬砖工”到“建筑师”的转变过程。学会使用框架，让你把注意力集中在业务逻辑上，而不是繁琐的 DOM 操作中。

📈 前端成长路线图（参考）

阶段技术栈目标
入门HTML + CSS + 原生 JS能做出静态页面
进阶Vue / React学会组件化开发，数据驱动视图
工程化npm + Vite/Webpack理解项目结构和打包机制
全栈Node.js + 数据库能独立开发完整 Web 应用
移动开发React Native开发 Android/iOS App
AI 应用AIGC + 前端构建 AI 辅助的智能应用

结语：告别“切图崽”，成为真正的前端开发者吧！

从写 JS 操作 DOM，到用 Vue/React 声明式开发，再到工程化、全栈、AI 应用……前端这条路越走越宽。

记住一句话：

“前端的本质，是用技术把想法变成现实。”
掌握 Vue 和 React，就是你通往梦想的第一步。

avatar
文章
阅读
粉丝