从原生 JS 到 Vue：聚焦业务，告别底层 API 苦海🚀在前端开发的浩瀚宇宙中，技术的发展犹如繁星闪烁✨。从最初的

引言

在前端开发的浩瀚宇宙中，技术的发展犹如繁星闪烁✨。从最初的原生 JS 到如今的各类前端框架，每一次技术的迭代都为开发者带来了新的可能性🤩。今天，我们就一起来探讨如何从原生 JS 过渡到 Vue，让开发更加聚焦于业务，而非底层 API 的繁杂操作😎。

原生 JS 的 DOM 编程

原生 JavaScript 实现表格渲染深入剖析

代码结构和执行流程

HTML 部分

在第一段代码中，HTML 代码负责构建页面的基本结构。引入了 Bootstrap 样式库，这有助于快速搭建出具有一定美观性的页面布局🥰。
定义了一个表格，包含表头和一个初始的表格行，这是静态部分。表格的结构使用了标准的 HTML 语义化标签，如 <table>、<thead>、<tr> 和 <td>，使得代码更具可读性和可维护性👍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 挂载点 -->
    <div class="container">
        <table id="friends" class="table table-striped">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>家乡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>小李</td>
                    <td>抚州</td>
                </tr>
            </tbody>
        </table>
    </div>

JavaScript 部分
- 选择 DOM 元素：使用 document.querySelector 方法选择表格的 <tbody> 元素，这是后续动态内容的挂载点。该方法通过 CSS 选择器查找匹配的第一个元素，这里选择了 id 为 friends 的表格的 <tbody> 元素🧐。
```
const oBody = document.querySelector('#friends tbody');
```
- 定义数据：定义了一个包含朋友信息的数组 friends，每个元素是一个对象，包含 name 和 hometown 属性😃。
```
const friends = [
    {
        "name": "小王",
        "hometown": "九江"
    },
    {
        "name": "小刘",
        "hometown": "赣州"
    }
];
```
- 数据转换为 HTML 字符串：使用 map 方法遍历 friends 数组，将每个元素转换为一个 HTML 字符串，代表表格的一行。然后使用 join 方法将这些字符串连接成一个大的 HTML 字符串🤓
```
const html = friends.map(friend => `
    <tr>
        <td>${friend.name}</td>
        <td>${friend.hometown}</td>
    </tr>
`).join('');
```
- 更新 DOM：将拼接好的 HTML 字符串赋值给 <tbody> 元素的 innerHTML 属性，从而实现表格的动态渲染👏。
```
oBody.innerHTML = html;
```

存在的问题和挑战

代码复杂度：随着数据量的增加和功能的扩展，手动操作 DOM 的代码会变得越来越复杂😫。例如，如果需要添加新的列或处理数据的排序和过滤，就需要编写大量的代码来更新 DOM。
性能问题：每次更新 innerHTML 时，浏览器会重新解析和渲染整个 <tbody> 元素，这可能会导致性能下降，尤其是在处理大量数据时😣。
可维护性差：当代码逻辑变得复杂时，维护和修改代码会变得困难😩。例如，如果需要修改表格的结构或样式，就需要同时修改 HTML 和 JavaScript 代码。

聚焦业务，引入 Vue

Vue 实现表格渲染深入剖析

代码结构和执行流程

HTML 部分

同样引入了 Bootstrap 样式库，确保页面的美观性🥳。使用了 Vue 的模板语法，如 {{title}} 用于显示标题，v-for 指令用于循环渲染表格的每一行😜。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚焦于业务,而不是底层API</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<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.hometown}}</td>
                </tr>
            </tbody>
        </table>
    </div>

JavaScript 部分

引入 Vue 库：通过 <script> 标签引入 Vue 库，这里使用的是 Vue 3 的全局构建版本🤖。

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>

定义 Vue 应用实例：定义一个包含 data 方法的对象 APP，data 方法返回一个包含标题和朋友信息数组的对象😃。

const APP = {
    data() {
        return {
            title: 'ECUT 未来之星',
            friends: [
                {
                    name: "小王",
                    hometown: "九江"
                },
                {
                    name: "小刘",
                    hometown: "赣州"
                }
            ]
        };
    }
};

挂载 Vue 应用：使用 Vue.createApp(APP).mount('#app') 将 Vue 应用挂载到 id 为 app 的元素上。这一步会让 Vue 接管该元素及其子元素，根据数据的变化自动更新 DOM🎉。

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

Vue 的优势详细阐述

声明式语法：v-for 指令让开发者可以直接在 HTML 模板中表达数据的循环渲染逻辑，无需手动操作 DOM 节点😎。这种声明式的方式使得代码更加直观和易于理解，减少了出错的可能性👍。
数据驱动：Vue 采用了响应式原理，当数据发生变化时，Vue 会自动检测到并更新相关的 DOM 元素🤩。例如，如果修改了 friends 数组中的某个元素，表格会自动更新以反映这些变化，无需开发者手动编写更新 DOM 的代码👏。
组件化开发：虽然在这个简单的示例中没有体现，但 Vue 支持组件化开发😏。可以将页面拆分成多个小的组件，每个组件负责特定的功能，提高了代码的复用性和可维护性。例如，可以将表格组件封装成一个独立的组件，在不同的页面中重复使用👍。
性能优化：Vue 使用虚拟 DOM 来优化性能🤓。虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。Vue 在数据发生变化时，会先在虚拟 DOM 上进行计算和比较，找出需要更新的最小范围，然后只更新真实 DOM 中需要更新的部分，减少了不必要的 DOM 操作，提高了性能👏。

现代前端开发框架的优势

聚焦业务逻辑

现代前端开发框架（如 Vue 和 React）让开发者可以告别原生 JS 的 “刀耕火种” 时代🔥。它们提供了更高级的抽象，让我们可以聚焦于业务逻辑，而不是底层的 DOM API 操作😎。例如，在 Vue 中，我们只需要关注数据的定义和展示，而无需关心如何手动更新 DOM。这使得代码更加简洁、易于理解和维护👍。

提高开发效率

使用前端框架可以大大提高开发效率👏。框架提供了许多内置的指令和组件，如 v-for、v-bind 等，让我们可以快速实现各种功能😃。同时，框架还支持组件化开发，将页面拆分成多个小的组件，每个组件负责特定的功能，提高了代码的复用性和可维护性👍。

良好的用户体验

在样式方面，我们可以引入第三方库（如 Bootstrap）来提高用户体验😎。这些库提供了丰富的样式类，让我们无需编写大量的细节和重复代码，只需要关注业务类的样式即可。例如，在上述代码中，我们使用了 Bootstrap 的 table 和 table-striped 类来美化表格🥰。

总结

从原生 JS 到 Vue 的过渡，是前端开发技术不断进步的体现🎉。通过使用现代前端开发框架，我们可以更加聚焦于业务逻辑，提高开发效率，为用户提供更好的体验🥳。在未来的开发中，不妨尝试使用 Vue 或其他前端框架，让开发之路更加轻松愉快🚗。