语义化标签的重要性
在前端开发中，语义化标签是构建数据展示的基础。当需要向老板展示图标和表格数据时，标准的table结构必不可少：
<table>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
</table>
原生JavaScript：DOM编程的复杂性
挂载点概念的初现
在原生JavaScript开发中，挂载点是指页面中用于动态生成内容的目标DOM元素。我们需要先在HTML中预留一个容器作为挂载点，然后通过JavaScript动态生成内容填充到这个位置。
手动操作DOM节点实现动态更新
在原生JavaScript中，我们必须手动操作DOM节点来实现界面的动态更新：
<!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": "王子",
"hometown": "九江"
},
{
"name": "公主",
"hometown": "赣州"
},
];
// html 字符串 = 数组 类型转换
oBody.innerHTML = friends.map(friend => `
<tr>
<td>${friend.name}</td>
<td>${friend.hometown}</td>
</tr>
`).join('')
</script>
</body>
</html>
在这个例子中，<tbody>标签就是我们的挂载点，通过注释<!-- 挂载点 -->标明。JavaScript代码中：
const oBody = document.querySelector('#friends tbody')获取挂载点- 挂载点的html内容由js动态生成
- 通过
innerHTML将转换后的HTML字符串插入到挂载点中
这种方式需要开发者手动管理挂载点与数据的关系。
为了提升用户体验，避免编写重复的细节代码，我们引入第三方库Bootstrap这个PC端CSS框架来处理业务类样式：
.container容器提供固定宽度布局table相关样式类美化表格显示效果
这种方式让开发者focus于业务逻辑而非样式细节。
Vue框架：聚焦业务逻辑
从jQuery到Vue的转变
jQuery已经退出历史舞台，Vue成为现代前端开发的主流选择。Vue让开发者聚焦于业务逻辑，将friends数据绑定到tbody挂载点上，远离复杂的API操作，通过声明式方式循环输出tr。关键在于挂载点的概念从手动DOM操作转变为自动数据绑定。
Vue的挂载点机制
Vue框架将挂载点概念进一步发展和简化。在Vue中：
<div id="app">作为整个应用的挂载点- 通过
Vue.createApp(App).mount('#app')将Vue应用挂载到指定元素 #app区域内的所有内容都支持Vue的响应式功能<tbody>区域通过v-for指令自动处理数据循环，无需手动操作DOM
Vue让挂载点从单纯的DOM容器变成了响应式的数据绑定区域。
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>
<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>
// html + css 看到页面 尽快出来，css 放在头部
// js 交互的， 可以晚一步 不会去和html + css 争抢时间
// js 应该放在页面底部引用
// 做一个App
const App = {
// 申明数据的业务
data() {
return {
title:'ECUT 未来之星',
friends: [
{
"name": "王子",
"hometown": "九江"
},
{
"name": "公主",
"hometown": "赣州"
},
]
}
}
}
// 挂载点
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
现代前端开发框架：告别刀耕火种
开发理念的根本转变
现代前端开发框架让我们离开原生JS的刀耕火种时代，真正聚焦于业务开发。
从切图崽到App应用开发工程师的转变：
传统前端开发：
- html + css + 简单的js
- DOM操作 + 事件处理
- 关注底层API实现
现代App应用开发工程师：
- 使用
Vue.createApp(App).mount('#app')创建应用并指定挂载点 #app挂载点区域支持Vue app功能- 挂载点内的数据自动响应变化，摆脱低级DOM API操作
App概念与数据驱动
现代框架引入了App的概念，通过数据驱动的方式处理业务逻辑：
- Vue App中的
data()函数管理业务数据friends - 使用
v-for指令配合循环输出业务逻辑 - 实现数据与视图的自动同步
性能优化最佳实践
在资源加载方面，遵循以下原则：
- html + css 优先显示页面，css放在头部
- js交互功能可以延后加载，放在页面底部引用
- 避免js与html + css争抢渲染时间
React：大型应用的解决方案
React来自于Facebook，特别适合大型应用开发。创建React应用的标准方式：
npm init vite
通过vite工具可以快速初始化一个现代化的React项目。
总结
从原生JavaScript到Vue+React的演进过程，体现了前端开发从底层DOM操作向业务逻辑聚焦的根本转变。现代前端框架不仅提升了开发效率，更重要的是改变了开发者的思维模式，让技术真正服务于业务需求。
