前端框架对比与单页多页应用解析

"这篇文档包含了企业级面试中常见的前端技术面试题，主要讨论了Vue.js与React之间的区别、MVVM和MVC模式的区别、单页应用(SPA)与多页应用(MPA)的优缺点，以及在uni-app框架中常用的页面跳转方式。" ## Vue与React的区别 Vue和React都是目前最流行的前端框架，它们的核心特点都是数据驱动视图，支持组件化开发，并使用虚拟DOM配合diff算法来提高性能。 1. **核心思想不同**： - Vue采用MVVM模式，强调双向数据绑定，使得数据和视图间的同步更加便捷。 - React则基于组件，提倡函数式编程风格，强调状态管理，通常配合Redux或Context API来处理全局状态。 2. **组件写法差异**： - Vue的组件定义较为完整，包括模板、脚本和样式部分，可以直接在组件内编写HTML模板。 - React的组件主要是JSX语法，HTML元素被JavaScript表达式嵌入，组件以纯函数或类的形式定义。 3. **响应式原理不同**： - Vue使用依赖收集和异步更新队列来实现响应式系统，当数据变化时，会自动追踪并更新相关视图。 - React则依赖于PureComponent和shouldComponentUpdate生命周期方法，或者使用React.memo来优化性能，开发者需要手动管理哪些组件需要重新渲染。 ## MVVM与MVC的区别 MVC（Model-View-Controller）模式是一种软件设计模式，将模型、视图和控制器分离。在Vue中，MVVM（Model-View-ViewModel）模式引入了ViewModel，它是MVC中Controller的增强版。 - MVC中，View通过Controller与Model交互，View不能直接修改Model，而是通过Controller传递数据。 - MVVM模式下，ViewModel作为View和Model之间的桥梁，双向绑定使得View的改变可以直接反映到Model上，反之亦然。ViewModel弱化了Controller的概念，更专注于业务逻辑的处理，提高代码复用性和开发效率。 ## 单页应用与多页应用的区别 - **单页面应用(SPA)**： - 优点：页面切换速度快，用户体验流畅，适合复杂的交互式应用，实现前后端分离，资源按需加载，减少服务器压力。 - 缺点：SEO友好度较低，初始加载量大，且开发复杂度相对较高。 - **多页面应用(MPA)**： - 优点：对SEO友好，易于扩展，适合大型网站，便于数据分析。 - 缺点：开发成本高，服务器压力大，页面间跳转可能造成用户体验下降。 ## uni-app的页面跳转方式 uni-app是一个多端开发框架，它提供了多种页面跳转方式： - `uni.navigateTo`：保留当前页面，跳转到新的页面，形成页面栈。 - `uni.redirectTo`：关闭当前页面，跳转到新页面，不保留当前页面。 - `uni.reLaunch`：关闭所有页面，打开新的页面，用于启动新流程。 - `uni.switchTab`：跳转到tabBar页面，关闭其他非tabBar页面，适用于底部导航栏切换。 - `uni.navigateBack`：返回上一页面，类似于浏览器的回退操作。 这些方法帮助开发者在uni-app中灵活控制页面的跳转逻辑，实现类似Vue Router的导航功能。