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：使用ES5的
- 组件结构
- 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阶段，用于执行组件的初始化逻辑。
- Vue2：直接在组件的选项中定义生命周期钩子，如
- 性能优化
- Vue3在性能上进行了多项优化，包括更快的响应式系统、更高效的编译和渲染过程等。此外，Vue3还提供了Teleport和Suspense等新的组件，以支持更复杂的场景和更平滑的用户体验。
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 响应式原理 | 使用Object.defineProperty() | 使用Proxy |
| 组件结构 | 只能有一个根节点 | 支持多个根节点（Fragment） |
| API设计 | 选项型API（Options API） | 合成型API（Composition API），同时保留选项型API |
| 生命周期钩子 | 直接在组件选项中定义 | 大部分钩子名称前加on前缀，setup函数替代beforeCreate和created |
| 性能优化 | - | 更快的响应式系统、更高效的编译和渲染过程等 |
| 新增组件 | - | Teleport、Suspense等 |
