在互联网技术迅猛发展的今天，前端开发领域经历了翻天覆地的变化。从早期依赖于简单的HTML和CSS构建静态网页，到如今借助复杂的JavaScript框架打造交互性强、响应迅速的单页应用（SPA），这一历程不仅见证了技术的进步，也体现了程序员们不断追求更高效、更优雅解决方案的努力。下面我将从一个todo组件开始带你感受这段从原始DOM到现代VUE3精彩绝伦进化之路。
1. 原始的DOM操作
在前端开发的早期，开发者直接通过浏览器提供的Document Object Model (DOM) API进行页面元素的操控。这种方式虽然提供了对网页元素的基本访问和修改能力，但代码往往冗长且容易出错，尤其是在处理复杂的交互逻辑时。此外，不同浏览器之间的兼容性问题也使得纯DOM编程变得复杂和困难。且频繁的访问和修改DOM会降低网页的性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="app"></h2>
<input type="text" id="todo-input">
<script>
var app = document.getElementById("app");
var todoInput = document.getElementById("todo-input");
todoInput.addEventListener("keyup", function(event){ // 输入光标离开输入框
var val = event.target.value;
console.log(val,todoInput.value,this.value);
app.innerText = val;
});
</script>
</body>
</html>
2. jQuery时代的到来
随着Web应用的发展，开发者们遇到了更多的挑战，如跨浏览器兼容性和事件处理等问题。jQuery库在这个时候应运而生，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互的操作。jQuery提供了一套简洁的一致API，大大提高了开发效率，减少了编写代码量，并且有效地解决了跨浏览器的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2 id="app"></h2>
<input type="text" id="todo-input">
<script>
// 确保 DOM 完全加载后再执行脚本
$(document).ready(function(){
$('#todo-input').on('keyup', function(event){
var val = $(this).val(); // 获取输入框的值
console.log(val);
$('#app').text(val); // 更新 <h2> 的文本内容
});
});
</script>
</body>
</html>
2.1 提升
-
简化DOM选择 ：jQuery提供了一种更加简洁的方式来选择DOM元素。例如，
$('#app')比document.getElementById("app")更短且更具可读性。 -
事件绑定更加直观 ：使用
.on('keyup', function() {...})来绑定事件监听器，语法上更为简洁，并且支持多种类型的事件处理方式。此外，它还提供了更好的跨浏览器兼容性，特别是在处理老式浏览器时。
2.2 缺点
可以说jQuery只是简化了开发者的操作，底层还是要使用DOM API来操作网页，当你使用$(selector)选择元素时，jQuery实际上是在背后调用浏览器的document.querySelectorAll或其他相应的选择器方法。由于jQuery提供了额外的功能和兼容性处理，有时候它的性能可能不如直接使用原生JavaScript高效。特别是在大量DOM操作的情况下，原生API可能会表现出更好的性能，因为它们没有额外的抽象层开销。
3. Vue.js 2.x 的崛起
随着时间推移，单页应用(SPA)成为趋势，对于数据绑定、组件化架构的需求日益增长。Vue.js 2.x 是一个渐进式JavaScript框架，它的出现标志着前端开发进入了一个新的阶段。Vue允许开发者使用声明式的语法来创建用户界面，并且引入了响应式的数据绑定机制，使得状态管理更加直观。同时，Vue还支持组件化的开发模式，这不仅提高了代码的复用性，而且使大型项目的组织和维护变得更加容易。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE 更专注于业务（数据 + 配套语法）</title>
</head>
<body>
<div id="app">
<h2>{{title}}</h2>
<!-- 双向绑定 -->
<input type="text" id="todo-input" v-model="title">
</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 = {
// vue 2.0
data(){
return {
title:''
}
}
}
Vue.createApp(App).mount("#app")
</script>
</body>
</html>
3.1 提升
-
数据驱动视图：
- Vue采用声明式的数据绑定机制，开发者只需关注数据模型的变化，视图会自动更新。这与手动操作DOM相比，减少了大量的重复代码，使得应用逻辑更加清晰。
-
组件化开发：
- Vue支持组件化的开发模式，可以将页面拆分为独立的、可复用的组件。每个组件都可以有自己的模板、样式和逻辑，提高了代码的模块化程度和复用性。
-
更好的性能：
- vue2避免了反复的更新访问dom的操作而是批量的打包dom进行一次性渲染，减少了很多没必要走的路，虽然jQuery也对DOM操作进行了封装，但在处理复杂UI变化时，Vue的虚拟DOM和响应式系统通常能提供更好的性能表现。
3.2 缺点
vue2虽然简单但是不够灵活，vue2的选项式的AIP组件在处理大型项目的时候显的不那么灵活，在Vue 2中，data、methods和computed等分布在不同的地方，这使得理解和维护代码变得更加复杂。当组件变得庞大或逻辑变得复杂时，追踪特定功能的实现路径可能需要花费更多的时间。
4. 迈向 Vue.js 3.x
到了2020年，Vue团队发布了Vue 3，这是对之前版本的重大升级。Vue 3带来了性能上的显著提升，包括更快的初始加载时间和更少的内存占用。更重要的是，Vue 3引入了许多新特性，如组合式API（Composition API），它为逻辑复用提供了更好的支持；还有更好的TypeScript集成，使得类型检查更为严格，进一步增强了开发体验。此外，Vue 3优化了虚拟DOM算法，改进了渲染过程，从而提高了运行效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE 更专注于业务（数据 + 配套语法）</title>
<!-- 引入 Vue.js 3 -->
</head>
<body>
<div id="app">
<h2>{{ title }}</h2>
<!-- 双向绑定 -->
<input type="text" id="todo-input" v-model="title">
</div>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1M/vue/3.2.31/vue.global.min.js"></script>
<script>
// 使用 Composition API
const { createApp, ref } = Vue;
// 创建根组件
const App = {
setup() {
// 定义响应式数据
const title = ref('');
// 返回需要在模板中使用的变量和方法
return {
title
};
}
};
// 创建并挂载 Vue 应用
createApp(App).mount('#app');
</script>
</body>
</html>
4.1 提升
-
组合式API (Composition API) ：
- 引入了组合式API，提供了一种更灵活的方式来组织逻辑代码。相比选项式API，它更适合处理复杂业务逻辑，并且便于逻辑复用和测试。
-
更好的TypeScript支持：
- Vue 3 在设计之初就充分考虑到了 TypeScript 的集成，提供了更严格的类型检查和更完整的类型定义。这对于使用 TypeScript 构建的应用程序来说，有助于减少运行时错误并提高开发效率。
4.2 缺点
Vue 3确实带来了很多令人兴奋的新特性和性能提升，但它也并非完美无缺。例如Vue 3引入了许多新的特性和API变化，这意味着从Vue 2迁移到Vue 3可能需要对现有代码进行大量修改。再就是目前的关于vue3的文档和教程相对较少。
5. 总结
从最初的DOM操作到如今的Vue3，我们可以看到前端开发领域经历了巨大的变革。每个阶段的技术进步都反映了开发者社区不断追求更高效率、更好用户体验的努力。不得不说了解到这些前端框架的演变进化真的令人感触颇深，一代代程序员在前人的基础上进行创新和改进，不断推动web开发领域的快速发展。总之，前端框架的演变不仅是技术发展的缩影，更是程序员们不懈努力的结果。未来的程序员将站在巨人的肩膀上，继续书写属于自己的篇章。
