Vue
MVVM
MVVM（Model - View - ViewModel) 是一种前端开发的设计模式，它是在 MVC（Model - View - Controller）模式的基础上发展而来。
-
Model：代表数据模型，负责存储和管理应用的数据，通常与后端的数据进行交互。
-
View：代表视图层，是用户在界面上看到的部分，负责展示数据和接收用户的输入。
-
ViewModel：是 Model 和 View 之间的桥梁，它负责处理数据绑定和视图更新的逻辑。ViewModel 通过数据绑定将 Model 中的数据实时反映到 View 上，同时监听 View 的变化并更新 Model。
在 Vue 中，MVVM 模式得到了很好的体现。Vue 实例就相当于 ViewModel，它将数据（Model）和 DOM（View)进行了双向绑定，使得数据的变化能够自动更新到视图，视图的变化也能自动更新到数据。
Vue 和 React 的区别与相同点
相同点
- 组件化开发：都采用组件化的开发思想，将页面拆分成多个可复用的组件，提高代码的可维护性和复用性。
- 虚拟 DOM：都使用虚拟 DOM 来提高渲染效率，通过对比虚拟 DOM 的差异，只更新需要更新的真实 DOM 节点。
- 单向数据流：都遵循单向数据流的原则，数据的流动是单向的，便于数据的管理和调试。
区别
- 语法风格：Vue 使用模板语法，通过 HTML 模板和指令来描述视图，语法更加简洁直观；React 使用 JSX 语法，将 HTML 和 JavaScript 代码混合在一起，更具灵活性。
- 响应式原理：Vue 采用 Object.defineProperty ()（Vue2）或 Proxy（Vue3）来实现数据的响应式；React 则是通过手动调用 setState () 方法来触发组件的重新渲染。
- 生态系统：Vue 的生态系统相对较为简单，官方提供了很多实用的插件和工具，学习成本较低；React 的生态系统非常庞大，有大量的第三方库和工具可供选择，但也增加了学习和选择的成本。
Vue2 和 Vue3 的区别
- 响应式原理：Vue2 使用
Object.defineProperty ()来实现数据的响应式，存在一些局限性，如无法检测对象属性的新增和删除；Vue3 使用 Proxy 对象来实现响应式，解决了 Vue2 的局限性，并且性能更高。 - 组合式 API：Vue3 引入了组合式 API，如
setup ()函数，允许开发者以更灵活的方式组织代码，提高代码的复用性和可维护性；而 Vue2 主要使用选项式 API，代码组织相对较为固定。 - 性能优化：Vue3 在性能上有了显著提升，如更快的渲染速度、更小的打包体积等。这得益于 Vue3 采用了静态提升、PatchFlag 等优化技术。
- TypeScript 支持：Vue3 对
TypeScript的支持更好，组合式 API 使得TypeScript的类型推导更加方便和准确。
SPA
理解
SPA（Single Page Application） 即单页面应用，是一种在客户端动态加载内容的 Web 应用程序。它只有一个 HTML 页面，通过JavaScript动态地更新页面内容，而不需要重新加载整个页面。
优点
- 用户体验好：页面切换速度快，无需刷新整个页面，给用户带来流畅的交互体验。
- 开发效率高：可以使用前端框架（如
Vue、React）进行快速开发，提高开发效率。 - 可维护性强：代码结构清晰，便于管理和维护。
缺点
- 首屏加载慢：由于需要一次性加载所有的资源（如
JavaScript、CSS），首屏加载时间可能会较长。 - SEO 困难：搜索引擎爬虫难以理解单页面应用的内容，不利于搜索引擎优化。
SPA 和多页面应用
- 页面结构：SPA 只有一个 HTML 页面，通过
JavaScript动态更新页面内容；多页面应用有多个HTML页面，每次页面切换都需要重新加载整个页面。 - 加载方式：SPA 在首次加载时会加载所有的资源，后续页面切换只需要更新部分内容；多页面应用每次页面切换都需要重新加载页面的所有资源。
- 用户体验：SPA 的页面切换速度快，用户体验好；多页面应用的页面切换需要重新加载，可能会有明显的延迟。
- SEO：SPA 的 SEO 困难，需要使用特殊的技术（如 SSR）来解决；多页面应用的 SEO 相对容易，搜索引擎爬虫可以直接访问各个页面。
Vue 性能优化
编码阶段
- 合理使用
v-if和v-show：v-if是真正的条件渲染，当条件为假时，元素会被销毁；v-show只是通过 CSS 的 display 属性来控制元素的显示和隐藏 。因此，对于频繁切换显示状态的元素，使用v-show；对于不经常切换的元素，使用v-if。 - 避免不必要的计算和渲染：在计算属性和方法中，避免进行复杂的计算和不必要的 DOM 操作。
- 使用事件委托：将事件绑定到父元素上，通过事件冒泡来处理子元素的事件，减少事件监听器的数量。
打包优化
- 代码分割：使用 Vue 的动态导入（
import ()）或Webpack的代码分割功能，将大的文件分割成多个小的文件，按需加载，减少首屏加载时间。 - 压缩代码：使用 UglifyJS、Terser 等工具对
JavaScript和CSS代码进行压缩，减小文件体积。 - 使用 CDN：将一些常用的第三方库（如
Vue、jQuery）通过 CDN 加载，减轻服务器的压力，提高加载速度。
用户体验
- 骨架屏：在页面加载时，显示一个骨架屏，让用户知道页面正在加载，提高用户体验。
- 懒加载：对于一些非首屏必需的组件和资源，使用懒加载技术，在需要时再加载。
SEO 优化
- SSR（服务器端渲染） ：使用 Vue 的 SSR 功能，在服务器端将 Vue 组件渲染成 HTML 字符串，然后发送给客户端，提高搜索引擎的爬虫对页面的理解。
- 预渲染：对于一些静态页面，可以使用预渲染技术，在构建时将页面渲染成静态 HTML 文件，提高 SEO 性能。
Vue 生命周期
Vue 实例从创建到销毁的整个过程称为 Vue 生命周期，包括以下几个主要阶段：
-
创建阶段：
beforeCreate、created -
挂载阶段：
beforeMount、mounted -
更新阶段：
beforeUpdate、updated -
销毁阶段：
beforeDestroy（Vue2）/beforeUnmount（Vue3）、destroyed（Vue2）/unmounted（Vue3）
这些钩子函数在不同的阶段被调用，开发者可以在这些钩子函数中编写自己的代码，实现特定的功能。
常用的属性、指令
- 属性：
data、methods、computed、watch、props等。 - 指令：
v-bind、v-on、v-if、v-for、v-model、v-show、v-html、v-text等。
Computed 和 Watch 的区别
- Computed：计算属性，它是基于响应式数据计算得到的结果，具有缓存机制，只有当依赖的数据发生变化时，才会重新计算。计算属性适用于需要根据多个数据进行计算的场景。
- Watch：监听器，用于监听数据的变化，当数据发生变化时，会执行相应的回调函数。监听器适用于需要在数据变化时执行异步操作或复杂逻辑的场景。
Vue 组件通信
- props 和 emit：父组件通过向子组件传递数据，子组件通过
emit触发自定义事件向父组件传递数据。 - parent、children 和 refs：可以通过
parent访问父组件实例，通过访问子组件实例，通过refs 访问指定的子组件实例。 - 事件总线（Event Bus） ：创建一个全局的事件总线对象，组件之间可以通过事件总线来发送和接收事件。
- Pinia：是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- provide 和 inject：用于实现跨层级的组件通信，父组件通过
provide提供数据，子组件通过 inject 注入数据。
