Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区别

本文主要是介绍Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

SPA

SPA（Single Page Application，单页面应用）是一种Web应用程序架构，其核心特点是在用户与应用程序交互时，不重新加载整个页面，而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析，包括其优点和缺点：

SPA的优点

更好的用户体验：
- SPA无需重新加载整个页面，使用户在应用程序中浏览时感觉更为流畅，提高了用户体验。
- 页面局部更新和资源异步加载提高了应用的响应速度，减少了等待时间。
更快的页面加载速度：
- SPA只加载一次HTML、CSS和JavaScript文件，后续交互仅加载必要的数据，从而提高了页面加载速度。
更少的HTTP请求：
- SPA减少了HTTP请求的数量，因为大部分内容在初始化时加载完成，后续只需获取必要的数据。
减轻服务器压力：
- 后端仅需提供数据接口，而不需要构建和维护多个页面的HTML，从而减轻了服务器的负担。
模块化：
- SPA通常采用模块化的前端框架（如React、Angular、Vue等），便于组织和管理代码。
可维护性：
- 模块化和组件化开发提高了代码的可维护性，使开发更为灵活。
资源缓存：
- SPA应用可以在离线情况下正常工作，提供离线访问能力，因为一旦所有资源加载完成，就可以离线使用。
丰富的用户交互：
- 页面的局部更新和动态加载允许实现丰富的用户交互，提供更具吸引力的界面。

SPA的缺点

较大的初始加载时间：
- SPA需要加载所有内容，因此其初始加载时间可能较长，可能导致用户在初次访问时等待较长时间。
较高的内存使用：
- SPA加载所有内容到内存中，可能会消耗更多的内存，长时间运行可能导致内存占用增加。
对JavaScript的依赖：
- SPA对JavaScript的依赖较高，如果用户禁用了JavaScript，将无法正常使用。
SEO影响：
- 由于SPA的内容通过JavaScript加载，搜索引擎可能难以索引，虽然现代搜索引擎可以处理JavaScript，但仍可能存在一些问题。
浏览器历史管理复杂：
- SPA不会重新加载页面，因此浏览器的前进后退按钮可能无法正常工作，需要特殊处理。
内存泄漏风险：
- 不良的内存管理可能导致内存泄漏问题，需要开发者注意。

综上所述，SPA作为一种现代Web应用架构，在提供更好用户体验、提高页面加载速度和减轻服务器压力等方面具有显著优势，但同时也存在初始加载时间长、内存使用高、对JavaScript依赖强等缺点。开发者在选择SPA架构时，需要权衡其优缺点，根据具体需求做出合适的选择。

Vue中按需加载

Vue的按需加载（也称为延迟加载或懒加载）是一种优化技术，它允许应用程序只在需要时才加载相应的组件或资源，而不是在初始化时加载所有内容。这种方式对于提升应用性能、减少首屏加载时间、改善用户体验非常有帮助。Vue实现按需加载主要有以下几种方式：

1. Vue异步组件技术

Vue提供了异步组件的概念，允许在需要时才加载组件。这可以通过在组件定义时使用一个函数来实现，该函数返回一个Promise，该Promise解析为需要加载的组件。在Vue Router中配置路由时，可以使用这种方式来实现路由的按需加载。

示例代码：

const AsyncComponent = () => import('./AsyncComponent.vue');  const routes = [  { path: '/async', component: AsyncComponent }  
];

这种方式下，当访问/async路由时，AsyncComponent.vue才会被加载。

2. ES提案的import()

ES6引入的import()语法允许在代码中的任何位置动态地导入模块。与静态import语句不同，import()返回一个Promise对象，这个Promise解析为导入的模块。在Vue项目中，import()经常被用于Vue Router的路由配置中，以实现路由的按需加载。

示例代码（使用webpack的webpackChunkName注释来指定代码块名称）：

const AsyncComponent = () => import(/* webpackChunkName: "group-async-component" */ './AsyncComponent.vue');  const routes = [  { path: '/async', component: AsyncComponent }  
];

通过指定webpackChunkName，webpack可以将多个按需加载的组件合并到一个代码块中，以优化加载性能。

3. Webpack的require.ensure()

Webpack提供了一个require.ensure()方法，该方法允许将模块分割成不同的代码块，并在需要时按需加载它们。然而，需要注意的是，随着webpack的发展，require.ensure()已经逐渐被import()语法所取代，因为import()提供了更简洁的语法和更好的集成到现代JavaScript中的方式。

尽管如此，在某些情况下，特别是在需要向后兼容较旧代码库时，require.ensure()仍然是一个可行的选择。

示例代码（注意：这个例子更偏向于展示require.ensure()的用法，而非Vue的特定实现）：

require.ensure([], function(require) {  var AsyncComponent = require('./AsyncComponent.vue');  // 使用AsyncComponent进行一些操作  
}, 'chunkName');

总结

Vue的按需加载是提升应用性能的重要手段之一。通过Vue异步组件技术、ES提案的import()语法或Webpack的require.ensure()方法（尽管后者逐渐被淘汰），可以实现组件或资源的按需加载，从而减少首屏加载时间、改善用户体验。在实际项目中，推荐优先使用import()语法，因为它不仅简洁而且与现代JavaScript标准紧密集成。

MVC与MVVM

MVC

如果前端没有框架，只使用原生的html+js，MVC模式可以这样理解：

将html看成view，js看成controller，负责处理用户与应用的交互，响应对view的操作（对事件的监听），调用Model对数据进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）；
将js的ajax当做Model，也就是数据层，通过ajax从服务器获取数据。

过程：

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

MVVM

Vue MVVM这一篇就够啦！_vue r mvvm-CSDN博客

Vue2与Vue3的生命周期

生命周期阶段	Vue2 钩子函数	Vue3 钩子函数	作用说明
初始化前	beforeCreate	onBeforeCreate	组件实例被创建之前调用，此时组件的数据观测(data observer)、事件/侦听器的配置等还未完成，el属性目前不可见。
初始化后	created	setup	组件实例创建完成后被立即调用。在这一步，实例已完成数据观测(data observer)、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。Vue3中，setup函数替代了created和beforeCreate阶段，所有的组合式API逻辑都应该放在setup函数中。
挂载前	beforeMount	onBeforeMount	在挂载开始之前被调用：相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。
挂载后	mounted	onMounted	el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。
更新前	beforeUpdate	onBeforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
更新后	updated	onUpdated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件DOM已经更新，所以现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
卸载前	beforeDestroy	onBeforeUnmount	实例销毁之前调用。在这一步，实例仍然完全可用。
卸载后	destroyed	onUnmounted	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue3中的生命周期钩子函数名大多以"on"开头，与Vue2中的命名方式有所不同。
Vue3引入了组合式API（Composition API），其中setup函数是围绕beforeCreate和created生命周期钩子运行的，因此不需要显式地定义这两个钩子。
Vue3的生命周期钩子函数可以通过Composition API的import语句从'vue'中引入，并在setup函数中使用。
Vue3对生命周期函数的触发时机和合并方式进行了优化，以提高性能和开发体验。

Vue2与Vue3区别

Vue2与Vue3在多个方面存在显著的差异，这些差异主要体现在响应式原理、组件结构、API设计、生命周期钩子以及性能优化等方面。以下是对这些差异的详细解析，并在最后以表格形式进行对比。

详细解析

响应式原理
- Vue2：使用ES5的Object.defineProperty()方法来实现数据的响应式。这种方法只能监听对象属性的变化，对于数组的变化需要特殊处理，且不能监听对象属性的添加或删除。
- Vue3：采用ES6的Proxy对象来代理整个对象，从而实现对对象属性的监听，包括属性的添加、删除以及数组内部的变化。这种方式更加高效且易于维护。
组件结构
- Vue2：组件模板中只能有一个根节点，这限制了组件的灵活性。
- Vue3：支持多个根节点的组件，即Fragment（碎片），这可以减少不必要的包装元素，使组件结构更加清晰。
API设计
- Vue2：使用选项型API（Options API），将组件的不同部分（如数据、计算属性、方法等）分散在组件的选项中。
- Vue3：引入合成型API（Composition API），允许使用函数来组织逻辑，使得代码更加灵活和可复用。同时，Vue3也保留了选项型API，但推荐使用合成型API。
生命周期钩子
- Vue2：直接在组件的选项中定义生命周期钩子，如created、mounted等。
- Vue3：大部分生命周期钩子的名称前加上了on前缀，如onMounted、onUpdated等。同时，Vue3中的setup函数替代了Vue2中的beforeCreate和created阶段，用于执行组件的初始化逻辑。
性能优化
- Vue3在性能上进行了多项优化，包括更快的响应式系统、更高效的编译和渲染过程等。此外，Vue3还提供了Teleport和Suspense等新的组件，以支持更复杂的场景和更平滑的用户体验。

特性	Vue2	Vue3
响应式原理	使用`Object.defineProperty()`	使用`Proxy`
组件结构	只能有一个根节点	支持多个根节点（Fragment）
API设计	选项型API（Options API）	合成型API（Composition API），同时保留选项型API
生命周期钩子	直接在组件选项中定义	大部分钩子名称前加`on`前缀，`setup`函数替代`beforeCreate`和`created`
性能优化	-	更快的响应式系统、更高效的编译和渲染过程等
新增组件	-	Teleport、Suspense等