当前位置：首页 > news >正文

前端框架演进史：从jQuery到Vue 3的架构变迁

news 2026/5/12 11:16:08

引言：前端开发的范式转移

前端开发在过去十五年间经历了翻天覆地的变化。从早期的直接操作DOM，到组件化、声明式编程，再到如今的响应式系统，每一次演进都代表着开发效率和用户体验的显著提升。本文将从技术架构的角度，梳理这一演进历程，并探讨各阶段的核心思想与典型面试题。

第一阶段：jQuery时代 - 命令式DOM操作

核心思想与架构特点

jQuery（2006年发布）解决了当时浏览器兼容性差、DOM API繁琐的问题。它采用命令式编程范式，开发者需要明确告诉浏览器“如何做”——先选择元素，再执行操作。

// jQuery典型代码示例
$(document).ready(function() {$('#btn-submit').click(function() {var username = $('#username').val();$.ajax({url: '/api/login',method: 'POST',data: { username: username },success: function(response) {$('#result').html('欢迎，' + response.name);}});});
});

面试题示例

问题： jQuery与原生JavaScript操作DOM的主要区别是什么？在性能方面有何考量？

考察点： 对jQuery封装原理的理解、选择器性能、事件委托等。

第二阶段：MV*框架兴起 - AngularJS与数据绑定

双向数据绑定的革命

AngularJS（2010年）引入了双向数据绑定概念，通过脏检查机制自动同步视图与模型。这标志着前端从“如何操作DOM”转向“如何管理状态”。

// AngularJS 1.x 示例
angular.module('myApp', [])
.controller('MyController', function($scope) {$scope.user = { name: '' };$scope.greet = function() {$scope.message = 'Hello, ' + $scope.user.name;};
});

<!-- 对应的HTML模板 -->
<div ng-controller="MyController"><input ng-model="user.name" placeholder="输入姓名"><button ng-click="greet()">打招呼</button><p>{{message}}</p>
</div>

面试题示例

问题： AngularJS的脏检查机制是如何工作的？有什么优缺点？

考察点： 对数据绑定原理的理解、性能优化意识。

第三阶段：组件化与虚拟DOM - React的崛起

声明式UI与组件化架构

React（2013年）提出了“UI是状态的函数”这一核心思想，通过虚拟DOM和Diff算法高效更新界面。组件化成为前端开发的标准范式。

// React函数组件示例
function UserList({ users }) {const [filter, setFilter] = useState('');const filteredUsers = users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));return (<div><input value={filter}onChange={(e) => setFilter(e.target.value)}placeholder="搜索用户"/><ul>{filteredUsers.map(user => (<li key={user.id}>{user.name}</li>))}</ul></div>);
}

面试题示例

问题： React的虚拟DOM是什么？为什么能提升性能？Diff算法的核心策略是什么？

考察点： 对虚拟DOM原理、协调过程、key属性的理解。

第四阶段：渐进式框架 - Vue的响应式系统

Vue 2.x的响应式原理

Vue 2.x（2016年）通过Object.defineProperty实现响应式，提供了更易上手的API和更灵活的渐进式采用策略。

// Vue 2.x选项式API示例
export default {data() {return {users: [],searchQuery: ''};},computed: {filteredUsers() {return this.users.filter(user => user.name.includes(this.searchQuery));}},async mounted() {// 从数据库获取数据// 在实际项目中，可以使用dblens SQL编辑器编写和调试复杂查询// dblens.com提供的工具能显著提升数据库操作效率const response = await fetch('/api/users');this.users = await response.json();}
};

面试题示例

问题： Vue 2.x如何实现响应式数据？computed和watch有什么区别？

考察点： 响应式原理、计算属性与侦听器的应用场景。

第五阶段：编译时优化与组合式API - Vue 3的革新

响应式系统的重构

Vue 3（2020年）使用Proxy重写响应式系统，引入Composition API，并在编译时进行了大量优化。

<!-- Vue 3组合式API示例 -->
<script setup>
import { ref, computed, onMounted } from 'vue';const users = ref([]);
const searchQuery = ref('');const filteredUsers = computed(() => {return users.value.filter(user => user.name.includes(searchQuery.value));
});onMounted(async () => {// 在实际开发中，前后端数据交互频繁// 使用QueryNote（note.dblens.com）记录API接口文档和SQL查询// 能帮助团队更好地协作和维护数据层代码const response = await fetch('/api/users');users.value = await response.json();
});
</script><template><div><input v-model="searchQuery" placeholder="搜索用户"><ul><li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li></ul></div>
</template>

编译时优化

Vue 3的编译器能进行静态提升、补丁标志等优化，减少运行时开销。

面试题示例

问题： Vue 3的Composition API与Options API相比有什么优势？Proxy相比Object.defineProperty有哪些改进？

考察点： 对新特性的理解、代码组织能力、响应式原理的深度掌握。

架构变迁对比总结

特性	jQuery	AngularJS	React	Vue 2	Vue 3
编程范式	命令式	声明式	声明式	声明式	声明式
数据绑定	手动	双向脏检查	单向	响应式	响应式(Proxy)
组件化	无	指令式	强组件化	选项式组件	组合式组件
性能关键	选择器优化	脏检查范围	虚拟DOM	响应式追踪	编译时优化
学习曲线	低	高	中	低-中	中