从原生JS到Vue：前端开发如何聚焦业务而非底层API？
在前端开发的演进过程中，"聚焦业务逻辑"始终是开发者追求的目标。本文将通过一个具体案例——"朋友信息列表"的实现，对比原生JavaScript与Vue框架的开发差异，探讨现代前端框架如何帮助开发者脱离"刀耕火种"的底层API操作，真正将精力投入到业务价值的创造中。
一、背景：从"切图崽"到"应用工程师"的跨越
在前端发展早期，开发者的主要工作是"切图"：将设计稿转化为HTML/CSS代码，配合简单的JavaScript完成交互（如表单验证、动态弹窗）。这类工作的核心是操作DOM节点，例如通过document.querySelector获取元素，用innerHTML拼接HTML字符串，或手动绑定事件监听。
随着互联网应用复杂度提升，页面数据量和交互逻辑激增，原生JS的局限性逐渐暴露：
- 重复劳动：每次数据变化都需手动更新DOM（如数组遍历生成HTML字符串）；
- 易出错：DOM操作依赖严格的节点顺序和选择器正确性，微小错误可能导致页面崩溃；
- 维护成本高：业务逻辑与DOM操作耦合，需求变更时需同时修改数据和视图。
这种背景下，现代前端框架（如Vue、React）应运而生。它们通过"数据驱动视图"的核心理念，将开发者从底层API中解放出来——只需关注业务数据，框架自动完成视图更新。
二、案例实战：用原生JS实现"朋友信息列表"
为了对比，我们先看一个用原生JS实现的"朋友信息列表"案例（文件路径：c:\Users\SY\Desktop\lesson-si\js\vue_react\1.html）。
1. 功能需求
展示一个包含"姓名"和"家乡"两列的表格，数据来源于JSON数组，需动态渲染到页面。
2. 原生JS实现代码
<!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>
<!-- 动态内容插入位置 -->
</tbody>
</table>
</div>
<script>
// 1. 获取表格tbody节点（DOM操作起点）
const oBody = document.querySelector('#friends tbody');
// 2. 定义数据源（业务数据）
const friends = [
{ "name": "王子恒", "hometown": "九江" },
{ "name": "刘红", "hometown": "赣州" }
];
// 3. 手动拼接HTML字符串（数据→视图转换）
oBody.innerHTML = friends.map(friend => `
<tr>
<td>${friend.name}</td>
<td>${friend.hometown}</td>
</tr>
`).join(''); // 关键：用join消除数组默认的逗号分隔
</script>
</body>
</html>
3. 原生JS的痛点分析
- DOM操作耦合：数据变化时（如新增一个朋友），需重新执行
map+join逻辑并更新innerHTML，代码重复率高； - 细节陷阱：
map返回的是字符串数组，直接赋值innerHTML会导致逗号分隔（需用join('')修复）； - 可维护性差：若表格列增加（如新增"年龄"字段），需同时修改数据源、HTML模板和拼接逻辑。
三、Vue框架：让"数据驱动视图"成为可能
Vue框架的核心是"响应式数据"和"声明式渲染"。开发者只需定义业务数据，框架会自动监听数据变化并更新视图。我们用Vue重写上述案例（文件路径：c:\Users\SY\Desktop\lesson-si\js\vue_react\2.html）。
1. Vue实现代码
<!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>
<!-- v-for指令：循环渲染数组数据 -->
<tr v-for="friend in friends">
<td>{{ friend.name }}</td>
<td>{{ friend.hometown }}</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>
// 定义Vue应用实例（仅关注业务数据）
const App = {
data() {
return {
title: 'ECUT 未来之星', // 页面标题数据
friends: [ // 朋友信息数组
{ "name": "王子", "hometown": "九江" },
{ "name": "公主", "hometown": "赣州" }
]
}
}
}
// 挂载应用：Vue自动接管#app内的视图更新
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
2. Vue的优势对比
- 声明式语法：用
v-for="friend in friends"直接声明"循环渲染friends数组"，无需手动拼接HTML； - 响应式数据：若
friends数组新增元素（如friends.push({name: "张三", hometown: "南昌"})），页面会自动新增一行，无需任何DOM操作； - 逻辑解耦：业务数据（
title和friends）与视图模板（HTML中的{{ }}和v-for）分离，修改需求时只需调整数据或模板，互不影响。
四、从代码看理念：前端开发的"降维"
对比两段代码，我们能清晰看到前端开发理念的转变：
- 原生JS：开发者是"执行者"，需手动完成"数据→视图"的每一步转换（选择节点、拼接字符串、更新DOM）；
- Vue框架：开发者是"设计者"，只需定义业务数据和视图模板，框架作为"执行者"自动完成底层操作。
这种转变的本质是抽象层级的提升。Vue通过封装DOM操作、事件监听、数据响应等底层逻辑，让开发者聚焦于：
- 业务数据的结构设计（如
friends数组的字段定义）； - 视图模板的语义化表达（如
v-for的清晰语义）； - 交互逻辑的业务价值（如数据变化的触发条件）。
五、总结：现代前端的"App"思维
在c:\Users\SY\Desktop\lesson-si\js\vue_react\readme.md中提到："离开原生JS的刀耕火种，聚焦于业务——这是现代前端开发的核心。" Vue等框架的出现，不仅是技术的进步，更是开发思维的升级：从"操作DOM"转向"设计应用"（App）。
对于开发者而言，这种转变意味着：
- 更少的底层API记忆（如不再需要熟记
document.querySelector的各种用法）； - 更多的业务逻辑深度（如如何设计高内聚低耦合的数据结构）；
- 更高效的团队协作（声明式代码的可读性远高于DOM操作代码）。
未来，随着前端框架（如React、Vue）的持续演进，"聚焦业务"将不再是口号，而是每个开发者的日常——这，或许就是技术发展最动人的地方。
