2024年1月18日

1 vue3相较于vue2的优点

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

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

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

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

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

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

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

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

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

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

2 vue3中hooks应用

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

应用场景

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

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

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

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

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

优势

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

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

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

4. 类型推导：在使用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中的优点：

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

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

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

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

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

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

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

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

Vite 提供了对图片资源的内置支持，包括优化和转换。在 Vite 项目中，你可以直接导入图片，Vite 会处理这些资源并提供相应的 URL。以下是在 Vite 中处理图片的一些方法：

1. 静态导入：

   • 你可以直接在 JavaScript 或 CSS 文件中导入图片，Vite 会处理这些导入，并将图片视为模块。例如：

     import avatar from './avatar.png';

   • 在生产构建中，Vite 会为这些图片生成哈希并放置在 assets 目录下，同时更新引用的 URL。

2. 资源引用：

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

3. 内联：

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

4. 优化和转换：

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

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

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

5. 自定义转换：

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

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

6. 动态导入：

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

7. 使用 Vite 插件：

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

8. 使用第三方工具：

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

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

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

1. 代码分割（Code Splitting）：

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

2. 懒加载（Lazy Loading）：

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

3. 资源压缩：

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

4. 预加载和预取：

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

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

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

6. 利用缓存：

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

7. 使用 HTTP/2：

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

8. 优化 CSS 和 JavaScript：

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

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

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

9. 优化图片和媒体文件：

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

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

10. 减少第三方库的依赖：

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

11. 使用 Web Workers：

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

12. 性能监控和分析：

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

13. 优化网络请求：

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

14. 使用骨架屏（Skeleton Screens）：

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

6 vuex和pinia的区别

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

1. 版本兼容性：

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

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

2. API 设计：

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

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

3. 类型支持：

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

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

4. 模块热替换：

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

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

5. 插件和中间件：

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

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

6. 体积和性能：

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

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

7. 使用方式：

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

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