2024年1月18日

1 vue3相较于vue2的优点

性能提升：Vue3通过优化虚拟DOM和渲染过程，提高了性能。它的虚拟DOM更轻量级，渲染过程更快，并且引入了编译时优化，使得代码体积更小，加载更快。例如，初次渲染快55%，更新快133%，内存使用减少54%。

Composition API：Vue3引入了Composition API，这是一种新的组件API。它将组件逻辑分离并组合在一起，使得组件更容易维护和测试。与Vue2的Options API相比，Composition API在功能逻辑复杂繁多情况下，代码组织和复用更加方便。

支持碎片化：Vue3支持碎片化，即组件中可以有多个根节点。这减少了标签层级，减少了内存占用。

数据和方法定义的改进：Vue3通过使用Proxy API实现数据的双向绑定，代替了Vue2中的Object.defineProperty。这意味着Vue3可以直接监听对象而非属性，可以直接监听数组的变化，并且具有更多的拦截方法。

生命周期函数的改进：Vue3对生命周期钩子进行了重命名和调整，使得生命周期函数更加清晰和合理。

父子传参的改进：Vue3中，父传子使用props，子传父使用事件Emitting Events。Vue3还简化了setup()方法中使用emit的方式。

新的特性和工具：Vue3新增了如teleport（瞬移）等特性，并改进了指令与插槽的使用。

API重构：Vue3对许多API进行了重构，使得它们更一致、易于使用。例如，createApp()用于创建Vue实例，提供更好的TypeScript支持。

TypeScript支持：Vue3对TypeScript的支持更加友好，因为它的源码使用TypeScript重写。这使得对于规模较大的项目，类型检查和代码阅读更加方便。

更好的生态系统和工具支持：随着Vue3的发布，许多现有的Vue工具和库都进行了更新以支持Vue3，提供了更好的生态系统和工具支持。总的来说，Vue3在性能、功能和易用性方面都有显著的提升，使得开发者能够更高效地构建高质量的应用程序。

2 vue3中hooks应用

Vue3的Hooks是一种基于组合式API（Composition API）的编程范式，它允许开发者将组件的逻辑提取到可重用的函数中。这些函数，被称为Hooks，可以理解为Vue组件的“函数式”部分，它们使得逻辑复用和组件组织更加清晰和方便。以下是Vue3 Hooks的一些应用场景和优势：

应用场景

复用逻辑：将组件中的通用逻辑（如数据获取、处理用户输入、状态管理等）提取到Hooks中，可以在不同的组件中复用这些逻辑。

逻辑分离：通过Hooks，可以将组件的响应式逻辑与模板分离，使得组件的模板更加简洁，逻辑更加清晰。

测试：由于Hooks中的逻辑是可以独立于组件的，因此它们可以更容易地进行单元测试。

高阶组件：Hooks可以用来创建高阶组件，这些组件可以接收其他组件作为参数，并利用Hooks来增强或修改它们的行为。

插件开发：Hooks可以作为插件的一部分，为Vue应用提供可配置的逻辑。

优势

代码解耦：Hooks有助于减少组件间的耦合，使得每个组件的责任更加单一。

可读性增强：逻辑的抽取使得组件的模板部分更加直观，因为它们不包含业务逻辑。

维护性提高：抽取的逻辑更容易维护，更改一个功能点时，只需更新对应的Hook函数。

类型推导：在使用TypeScript时，Hooks可以提供更好的类型推导，使得代码更加健壮。

示例

下面是一个简单的Hook示例，它封装了一个数据获取的逻辑：
import { ref, onMounted } from 'vue';
export default function useData() {const data = ref(null);const fetchData = async () => {// 假设这是一个异步数据获取函数data.value = await someApiCall();};onMounted(fetchData);return { data };
}
在组件中使用这个Hook：
<template><div><p>Data: {{ data }}</p></div>
</template>
<script>
import { useData } from './hooks/useData';
export default {setup() {const { data } = useData();return { data };},
};
</script>
在这个例子中，useData 是一个Hook，它定义了一个data响应式变量和一个fetchData函数。在组件的setup函数中，我们调用了这个Hook，并得到了data变量。这样，数据获取的逻辑就被封装并复用了。

3 vue中虚拟dom的优点

Vue.js中的虚拟DOM（Virtual DOM）是一个重要的概念，它是在Vue框架中用于优化DOM操作的一种技术。虚拟DOM的核心思想是在JavaScript层面上模拟DOM结构，然后在实际DOM更新之前，在内存中比较新旧虚拟DOM的变化，只更新实际变化的部分，从而减少DOM操作的次数，提高性能。以下是虚拟DOM在Vue中的优点：

性能优化：虚拟DOM最大的优点是它能够保证性能的下限。在框架内部，虚拟DOM的实现会适配任何上层API可能产生的操作，因此它的某些DOM操作的实现必须是普通的。这样，虚拟DOM至少可以保证在不进行手动优化的情况下，依然可以提供还不错的性能。

避免直接操作DOM：虚拟DOM允许我们不再直接操作DOM，而是通过编写View-Model的代码逻辑，由框架根据虚拟DOM和数据双向绑定，帮助我们以可预期的方式更新视图。这极大地提高了开发效率，并且使得代码更容易维护。

跨平台：虚拟DOM本质上是JavaScript对象，与平台无关。因此，它可以更方便地进行跨平台操作，例如服务器渲染、Weex开发等等。

尺寸和内存优化：虚拟DOM需要在内存中维护一份DOM的副本。这样，在DOM更新速度和使用内存空间之间可以取得平衡。对于尺寸较小的页面，使用虚拟DOM可能会更慢，但对于大多数单页面应用，这应该都会更快。

更好的开发体验：由于虚拟DOM的存在，Vue的模板编写更加简单直观，开发者可以更加专注于业务逻辑的实现，而不是DOM操作。

动态UI的创建：虚拟DOM的动态性使得创建动态UI变得非常灵活和方便。开发者可以基于条件或数据动态生成UI元素，而无需关心底层DOM结构的复杂性。

性能监控和优化：虚拟DOM提供了监控和优化性能的可能性。开发者可以通过分析虚拟DOM的变化来识别性能瓶颈，并采取措施进行优化。虚拟DOM在Vue.js中的应用，极大地提升了开发效率，优化了性能，并且使得Vue应用的维护变得更加简单和直观。

4 打包时vite对图片进行的优化

Vite 提供了对图片资源的内置支持，包括优化和转换。在 Vite 项目中，你可以直接导入图片，Vite 会处理这些资源并提供相应的 URL。以下是在 Vite 中处理图片的一些方法：
静态导入：
你可以直接在 JavaScript 或 CSS 文件中导入图片，Vite 会处理这些导入，并将图片视为模块。例如：
import avatar from './avatar.png';
在生产构建中，Vite 会为这些图片生成哈希并放置在 assets 目录下，同时更新引用的 URL。
资源引用：

Vite 支持使用新的原生 <img src="image.png" /> 标签导入方式，无需 JavaScript 或 CSS 导入。

内联：

小于 4KB 的图片可以作为 Base64 数据 URI 内联到 JavaScript 或 CSS 中，以减少 HTTP 请求。

优化和转换：

Vite 支持使用 ?url 后缀来指示 Vite 应该将图片转换为 URL，而不是内联。

使用 ?webp 后缀可以指示 Vite 将图片转换为 WebP 格式，如果浏览器支持的话，这可以减小图片大小。

Vite 还可以集成其他工具（如 ImageMin）来进行更高级的图片压缩和优化。

自定义转换：

你可以通过 Vite 配置文件中的 assetsInclude 选项来扩展 Vite 处理的资源类型。

使用 transformAssetUrls 配置选项，可以自定义如何转换导入的图片资源。

动态导入：

你可以使用动态导入来按需加载图片，这有助于分割代码和提高性能。

使用 Vite 插件：

Vite 有一个丰富的插件生态系统，你可以使用现有的插件或创建自己的插件来进一步处理图片资源。

使用第三方工具：

除了 Vite 内置的功能外，你还可以集成第三方工具和库，如 svgo（用于优化 SVG 文件）或 sharp（用于高级图片处理）。为了充分利用 Vite 的图片处理能力，建议查看 Vite 的官方文档，特别是关于静态资源处理的部分，以及如何配置 Vite 来满足你的项目需求。

5 SPA单页面应用首屏优化处理方案

单页面应用（SPA）的首屏加载时间是用户体验的关键因素之一。以下是一些优化首屏加载时间的策略：

代码分割（Code Splitting）：

使用动态 import() 语法来分割代码，这样浏览器可以按需加载模块，而不是一次性加载所有代码。

懒加载（Lazy Loading）：

对于一些不是立即需要的资源（如图片、视频、某些模块），可以延迟加载，直到它们真正需要显示的时候。

资源压缩：

使用工具（如 Terser）压缩 JavaScript 代码，使用 CSS 压缩工具（如 CSSNano）压缩 CSS，以及使用图片压缩工具（如 ImageMin）压缩图片资源。

预加载和预取：

使用 <link rel="preload"> 和 <link rel="prefetch"> 来告知浏览器哪些资源是重要的，以及哪些资源可以在空闲时预先加载。

服务端渲染（SSR）或静态站点生成（SSG）：

通过服务端渲染或静态站点生成，可以在服务器端渲染好首屏内容，减少浏览器渲染工作，加快首屏展示。

利用缓存：

使用浏览器缓存策略，如 HTTP 缓存（Cache-Control, ETag 等），来缓存不会经常变更的资源。

使用 HTTP/2：

HTTP/2 提供了多路复用、服务器推送等特性，可以加快资源的加载速度。

优化 CSS 和 JavaScript：

将关键 CSS（Critical CSS）内联到 HTML 中，确保首屏内容快速展示。

避免使用复杂的 CSS 选择器，减少 CSS 文件的大小。

延迟加载非关键 JavaScript，使用异步或延迟脚本来避免阻塞渲染。

优化图片和媒体文件：

使用适当的图片格式，如 WebP，它通常比 JPEG 或 PNG 格式更小。

使用响应式图片和图片源设置（<picture> 和 srcset）来根据设备尺寸和分辨率提供最合适的图片。

减少第三方库的依赖：

只引入必要的库，并考虑使用较小的替代品。

使用 Web Workers：

将一些计算密集型任务放到 Web Workers 中执行，避免阻塞主线程。

性能监控和分析：

使用工具（如 Lighthouse, WebPageTest）来分析和监控应用性能，找出瓶颈并进行优化。

优化网络请求：

减少请求次数，合并小文件，使用 CDN 分发内容。

使用骨架屏（Skeleton Screens）：

在内容加载时显示占位符，提供更好的用户体验。通过上述策略的组合使用，可以显著提高单页面应用的首屏加载速度，从而提升用户体验。记住，性能优化是一个持续的过程，需要不断地监控、测试和调整。

6 vuex和pinia的区别

Vuex 和 Pinia 都是 Vue.js 应用中用于状态管理的库，但它们之间存在一些关键的区别：

版本兼容性：

Vuex 是 Vue 2 的官方状态管理库，而 Pinia 是为 Vue 3 设计的。不过，Vuex 也提供了一个适用于 Vue 3 的版本，即 Vuex 4。

Pinia 同时支持 Vue 2 和 Vue 3，这意味着你可以无缝地在两个版本的 Vue 中使用 Pinia。

API 设计：

Vuex 的 API 设计较为复杂，包含多个概念，如 state、getters、mutations、actions 和 modules。

Pinia 的 API 设计更为简洁，去掉了 mutations，只有 state、getters 和 actions。这使得状态管理更加直观和易于理解。

类型支持：

Vuex 4 引入了类型支持，但在 Vuex 3 中并不支持 TypeScript。

Pinia 从一开始就是用 TypeScript 编写的，提供了出色的类型支持，使得在 Vue 应用中使用 TypeScript 更加容易。

模块热替换：

在 Vuex 中，模块热替换需要额外的配置。

Pinia 默认支持模块热替换，无需额外配置，这在使用 Vue CLI 或 Vite 时非常有用。

插件和中间件：

Vuex 有一个插件系统，允许你通过插件扩展 Vuex 的功能。

Pinia 提供了一个更加简单的 API 来创建插件，同时支持中间件。

体积和性能：

Pinia 通常比 Vuex 更轻量，因为它去掉了 Vuex 中的一些概念，如 mutations。

在性能方面，Pinia 和 Vuex 都非常快，但 Pinia 的简化设计可能会在大型应用中提供微小的性能优势。

使用方式：

Vuex 需要你定义 store，然后通过 Vue.use() 安装 Vuex 插件，并在 Vue 组件中通过 this.$store 访问。

Pinia 允许你直接创建 store，并在组件中通过导入的方式使用，无需安装插件。 Pinia 是 Vuex 的一个现代替代品，它提供了更简洁的 API，更好的类型支持，并且更容易上手。如果你正在使用 Vue 3，Pinia 可能是一个更好的选择。然而，如果你已经在一个大型项目中使用了 Vuex，并且不打算迁移，那么 Vuex 仍然是一个可靠的选择。