引言
在前端开发的世界里，技术的发展日新月异。曾经，原生 JavaScript 是开发者们构建动态网页的主要工具，但随着项目规模的增大和复杂度的提升，原生 JS 在开发效率和可维护性上逐渐暴露出一些问题。这时，现代前端开发框架如 Vue、React 等应运而生，为开发者带来了全新的开发体验。今天，我们就来探讨一下如何从原生 JS 过渡到 Vue，感受前端开发的进化。
原生 JS 的传统开发方式
语义化标签与 DOM 编程
在原生 JS 开发中，我们经常会使用语义化标签来构建页面结构，比如表格（table）。以下是一个简单的 HTML 表格示例：
<!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>
// 挂载点 html 由js 动态生成
const oBody = document.querySelector('#friends tbody');
// JSON 数组
// DOM 编程 动态页面 数据
const friends = [
{
'name':'zs',
'home':'上海'
},
{
'name':'ls',
'home':'北京'
}
];
// html 字符串 = 数组 类型转换
oBody.innerHTML = friends.map(friend => `
<tr>
<td>${friend.name}</td>
<td>${friend.home}</td>
</tr>
`).join('');
</script>
</body>
</html>
第三方库——BootStrap
-
快速构建美观界面：Bootstrap 自带很多设计好的组件样式，像表格、按钮等能让表格美观专业，无需写大量 CSS 代码。
-
响应式布局：页面能在电脑、平板、手机等设备自适应显示，提供一致浏览体验。
-
开发高效：有统一的 CSS 类命名和使用规范，代码可读性和可维护性好，方便团队协作。
-
性能优化：CDN 加速：通过 CDN 引用文件，可根据用户位置选最近节点提供服务，加快文件下载，减少页面加载时间。
添加link前：
添加link后：
强调观点：在如今LLM 时代，我们开发者应该更聚焦于业务逻辑的思考，而不是代码样式的摆弄，当我们需要某个组件时，提供对应prompt ，让 AI 快速查询对应组件即可。
例子解析：我们首先通过 document.querySelector 方法获取到表格的 tbody 元素，然后定义了一个包含朋友信息的数组 friends。接着，使用 map 方法将数组中的每个元素转换为 HTML 字符串，并通过 join 方法将这些字符串连接起来，最后将结果赋值给 tbody 的 innerHTML 属性，从而动态地将数据渲染到表格中。
ps：这里有一个小知识点就是map返回是数组但是.innerHTML需要字符串，这里就有一个自动类型转化。
类似于：
现代前端开发框架的优势
聚焦于业务
原生 JS 的开发方式虽然可以实现动态页面，但当项目规模变大时，代码的维护和扩展会变得非常困难。而现代前端开发框架如 Vue 可以让我们聚焦于业务逻辑，远离底层的 DOM API。
数据驱动视图
Vue 采用了数据驱动视图的理念，通过定义数据和模板，Vue 会自动将数据的变化反映到视图上。以下是一个使用 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">
<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.home}}</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>
// 做一个App
const App = {
// 申明数据的业务
data(){
return {
friends:[
{
'name':'zs',
'home':'上海'
},
{
'name':'ls',
'home':'北京'
}
]
}
}
}
// 挂载点
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
在这里我们为什么将Vue 库的 <script> 标签放在页面底部
-
浏览器按顺序解析 HTML 代码，碰到
<script>标签，就会暂停解析 HTML，页面渲染会延迟，用户长时间看到空白页。 -
使用 Vue 要操作 DOM 元素，若 JavaScript 代码在 DOM 元素没加载完就执行，可能找不到对应元素，引发错误。
在这个 Vue 示例中，我们定义了一个 Vue 应用 App，在 data 方法中返回了一个包含朋友信息的数组 friends。在 HTML 模板中，使用 v-for 指令来循环渲染 friends 数组中的每个元素，将数据动态地显示在表格中。通过这种方式，我们不需要手动操作 DOM 元素，只需要关注数据的变化，Vue 会自动更新视图。
总结
从原生 JS 到 Vue 的转变，让我们从繁琐的 DOM 操作中解脱出来，更加专注于业务逻辑的实现。Vue 的数据驱动视图和组件化开发方式，大大提高了开发效率和代码的可维护性。对于前端开发者来说，掌握现代前端开发框架是必不可少的技能，它能让我们在开发过程中更加游刃有余，创造出更加优秀的前端应用。
希望通过这篇文章，你能对从原生 JS 到 Vue 的转变有一个更清晰的认识，并且在实际开发中尝试使用 Vue 来提升自己的开发效率。让我们一起拥抱前端开发的新时代！
