用 Vue 重写原生 JS 表格后，我再也不想手动操作 DOM 了

小公主
149 阅读4分钟

引言

在前端开发早期，我们习惯用最基本的 HTML、CSS 和原生 JavaScript 实现网页交互，直接操作 DOM，虽然能快速看到效果，但当页面变复杂后，代码也变得又长又乱。幸运的是，Vue.js 这样的现代前端框架给了我们新的思路——让我们聚焦业务，而不是再为 DOM 操心。

本文通过一个简单的对比示例，展示了如何用 Vue.js 重写原生 JS 的表格渲染逻辑，让你告别低效的 DOM 操作，专注业务开发。适合初学者入门 Vue，也适合对现代前端框架感兴趣的同学快速上手。

一、原生 JavaScript 与 DOM 编程：能用但不优雅

先看一个最基础的例子，我们用原生 JS 来动态生成一个表格，展示开发者信息：

<div class="container">
  <table id="developers" class="table table-striped">
    <thead>
      <tr>
        <th>开发者</th>
        <th>擅长领域</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>  
</div>

const oBody = document.querySelector('#developers tbody')
const developers = [
  { name: "林晓峰", specialty: "Vue组件化开发" },
  { name: "陈梓涵", specialty: "React状态管理" }
]
oBody.innerHTML = developers.map(dev => `
  <tr>
    <td>${dev.name}</td>
    <td>${dev.specialty}</td>
  </tr>
`).join('')

image.png

这段代码确实能跑起来，而且渲染出来的表格也很直观。但当项目不断增长，需要动态响应用户操作、处理状态更新时，频繁操作 DOM 会让代码变得越来越臃肿、不易维护。

二、Vue.js：聚焦业务逻辑，远离底层操作

Vue.js 帮我们抽象掉了繁琐的 DOM 操作，提供了更自然的方式来构建 UI。我们只需要定义数据，Vue 会帮我们把数据“映射”到视图上。

看下面的例子，使用 Vue 实现同样的功能：

<div class="container" id="app">
  <h1>{{ title }}</h1>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>开发者</th>
        <th>擅长领域</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="dev in developers" :key="dev.name">
        <td>{{ dev.name }}</td>
        <td>{{ dev.specialty }}</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>
const App = {
  data() {
    return {
      title: '前端星球 · 技术担当',
      developers: [
        { name: "林晓峰", specialty: "Vue组件化开发" },
        { name: "陈梓涵", specialty: "React状态管理" }
      ]
    }
  }
}
Vue.createApp(App).mount('#app')
</script>

我们不再写 document.querySelector、innerHTML，也不再拼接 HTML 字符串，而是用 v-for 来自动渲染列表，只关注“数据是什么”，其他交给 Vue 来处理。

三、样式与用户体验：用 Bootstrap 快速上手

我们给表格加了 Bootstrap 的样式类 .table 和 .table-striped，这是很多项目中都会用到的技巧：

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  • .container 让内容居中，设置固定宽度；
  • .table 让表格有基础样式；
  • .table-striped 增加斑马线背景，提升可读性。

用现成的 CSS 框架，能让我们更专注于业务开发，而不是花时间写重复样式。

四、从“切图仔”到“应用开发者”的思维转变

很多人刚开始做前端，都是从“切图”起步：把设计图还原成 HTML + CSS，再加点 JS 实现交互。而现代前端开发的重点已经变成“做应用”。

Vue 的这行代码背后其实就是一个完整的应用入口：

Vue.createApp(App).mount('#app')

也就是说，Vue 接管了 #app 区域的所有行为，我们只需要告诉它“我的数据是什么”，“我的页面应该长什么样”。

开发者不再是页面的搬运工，而是应用逻辑的设计师。

五、React 简介：大型项目的可靠选择

Vue 更适合快速上手、组件灵活，适合中小项目；而 React 则更偏向工程体系，来自 Facebook，很多大型项目、团队都会选择它。

例如，使用 Vite 快速创建 React 项目：

npm init vite my-app --template react

虽然 JSX 和状态管理初看有些复杂，但 React 生态成熟，特别适合需要细粒度控制、多人协作的中大型应用。

六、为什么要使用前端框架？

一个问题常常被问：原生 JS 能做的事情，为什么还要引入框架？

原因很简单：

  • 开发效率高：少写重复代码；
  • 更容易维护：结构清晰，组件化分工；
  • 逻辑更聚焦：专注于数据与业务；
  • 自动响应式：数据变了，界面自动更新；
  • 社区活跃：有丰富的组件库、工具链支持。

前端框架就像是一台“自动挡”的车，它不会限制你的自由，反而让你把注意力放在真正重要的方向盘和道路上，而不是换挡。

结语

写原生 JS 是每个前端必经的基础阶段，它让我们理解网页结构、浏览器机制。但一旦进入工程化开发，就需要 Vue 或 React 这样的工具来提升效率。

Vue 是连接“写页面”和“做应用”的桥梁。如果你还没用过，不妨用今天这个例子作为练手项目，亲自感受一下“聚焦业务逻辑”的快感。

让我们一起告别“刀耕火种”的 DOM 编程，迈进现代前端开发的世界吧！

avatar
文章
阅读
粉丝