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

在前端开发的发展历程中，技术的迭代日新月异。从最初的原生 JS 到如今流行的 Vue 和 React 框架，前端开发变得更加高效和便捷。

一、原生 JS 时代

1.1 语义化标签

在原生 JS 开发中，语义化标签是构建页面结构的基础。比如在展示图表和表格时，通常会使用 <table> 标签，其结构包含 <thead>、<tr>、<th>、<tbody>、<tr> 和 <td> 等。这些标签不仅能让页面结构更加清晰，还便于老板等非技术人员查看数据。示例代码如下：

html 复制代码

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>家乡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>北京</td>
        </tr>
    </tbody>
</table>

1.2 DOM 编程

原生 JS 中，DOM 编程是核心部分。通过操作 DOM 节点，我们可以动态更新页面内容。例如，当需要根据用户输入或数据变化更新表格内容时，就需要使用 DOM 操作。但这种方式代码量较大，且维护起来比较困难。

1.3 样式与用户体验

在原生 JS 开发中，样式编写往往需要关注很多细节，容易出现重复代码。为了提升用户体验，我们可以引入第三方库，如 Bootstrap。它是一个 PC 端的 CSS 框架，提供了栅格系统等功能，能让我们更专注于业务逻辑。

二、从原生 JS 到框架的转变

2.1 jQuery 的兴衰

在早期的前端开发中，jQuery 发挥了重要作用，它简化了 DOM 操作和事件处理。然而，随着前端技术的发展，jQuery 逐渐退出了历史舞台。现代前端框架提供了更强大的功能和更高效的开发方式。

2.2 Vue：聚焦业务开发

Vue 是一款轻量级的前端框架，它让开发者能够聚焦于业务逻辑。以展示 friends 数据为例，在原生 JS 中需要手动操作 DOM 来循环输出 <tr> 元素，而在 Vue 中可以使用 v-for 指令轻松实现。示例代码如下：

html 复制代码

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

<script>
    const app = Vue.createApp({
        data() {
            return {
                friends: [
                    { id: 1, name: '王同学', hometown: '九江' },
                    { id: 2, name: '刘同学', hometown: '赣州' }
                ]
            };
        }
    });

    app.mount('#app');
</script>

在这个例子中，我们使用 v-for 指令遍历 friends 数组，并动态生成 <tr> 元素。这样就无需手动操作 DOM，大大提高了开发效率。

2.3 React：适合大型应用的框架

React 是 Facebook 开发的一款前端框架，适合构建大型应用。创建 React 应用可以使用 npm init vite 命令。React 采用组件化开发模式，将页面拆分成多个独立的组件，每个组件有自己的状态和逻辑，便于维护和复用。

三、现代前端开发框架的优势

3.1 离开原生 JS 的"刀耕火种"

现代前端框架让开发者摆脱了原生 JS 中繁琐的 DOM 操作和复杂的代码逻辑，提供了更高效、更简洁的开发方式。

3.2 聚焦业务

现代前端框架引入了 App 的概念，将开发者从"切图崽"的角色转变为 App 应用开发工程师。例如在 Vue 中，可以使用 Vue.createApp(App).mount('#app') 来接管页面，使用高级的框架特性完成业务需求，而无需使用低级的 DOM API。

3.3 循环输出数据的便捷性

在 Vue 和 React 中，循环输出数据变得非常简单。Vue 可以使用 v-for 指令，React 可以使用 map 方法。这种方式让代码更加简洁易读，也便于维护。

四、总结

从原生 JS 到 Vue 和 React，前端开发经历了巨大的变革。现代前端框架让开发者能够更专注于业务逻辑，提高开发效率和代码质量。无论是小型项目还是大型应用，都可以根据需求选择合适的框架。希望本文能帮助大家更好地理解前端开发的进化之路，在实际开发中做出更合适的选择。