vue3.0面试题

小小wan
356 阅读7分钟

以下是一些常见的 Vue3.0 面试题及其答案，供参考： --- ### **

1. Vue3 有哪些新特性？

Composition API：替代 Options API，支持逻辑复用和更灵活的代码组织（如 `setup`, `ref`, `reactive` 等）。 

- **性能优化**： - 使用 Proxy 替代 `Object.defineProperty` 实现响应式，支持监听动态属性、数组下标变化。 -

 虚拟 DOM 优化（静态提升、PatchFlag 标记动态节点）。

Tree-shaking 支持，减少打包体积。 - **新组件**： - **Fragment**：支持多根节点组件。 Teleport：将子组件渲染到 DOM 的指定位置。 

 Suspense：处理异步组件加载状态。 

TypeScript 支持**：Vue3 使用 TypeScript 重构，提供更好的类型推导。 

Vite 构建工具**：开发环境极速启动，基于原生 ESM。 --- ### **

2. Composition API 与 Options API 的区别？

Options API：通过 `data`, `methods`, `computed` 等选项组织代码，适合简单场景，但逻辑分散。 - **Composition API**：通过函数式 API（如 `setup`）集中管理逻辑，支持代码复用（自定义 Hook），更适合复杂组件。

3. Vue3 响应式原理（Proxy vs defineProperty）** - **Vue2**：使用 `Object.defineProperty` 监听对象属性的 `get/set`，无法检测新增/删除属性、数组下标变化。 - **Vue3**：基于 **Proxy** 代理整个对象，支持动态属性、数组变化监听，性能更好。 --- ### **

_toRef用于创建响应式引用的实用函数，保持响应式连接，当修改toRef返回的ref时，原响应式的对象属性也会更新，反之亦_然

4. `ref` 和 `reactive` 的区别** - **`ref`**：用于基本类型（如 `string`, `number`），通过 `.value` 访问值；在模板中自动解包。 - **`reactive`**：用于对象/数组，返回 Proxy 代理对象，直接访问属性。 - **使用场景**：简单值用 `ref`，复杂对象用 `reactive`。 --- ### **

5. `setup` 函数的作用** - **入口函数**：在组件创建前执行，用于定义响应式数据、方法、生命周期等。 - **参数**：接收 `props` 和 `context`（含 `emit`, `slots`, `attrs`）。 - **返回值**：模板中使用的数据和方法需从 `setup` 返回。 --- ### **

6. Vue3 生命周期变化** - 移除 `beforeCreate` 和 `created`（由 `setup` 替代）。 - 生命周期钩子前加 `on`（如 `onMounted`, `onUpdated`）。 - 新增 `onRenderTracked` 和 `onRenderTriggered` 用于调试渲染。 --- ### **

7. Vue3 中 `v-model` 的变化** - **Vue2**：`v-model` 是 `:value` + `@input` 的语法糖，一个组件只能一个。 - **Vue3**： - 支持多个 `v-model`（如 `v-model:title`, `v-model:content`）。 - 自定义修饰符通过 `modelModifiers` 传递。 --- ### **

例如：blog.csdn.net/qq\_4282284…

8. 如何实现逻辑复用？** - **Composition API**：将逻辑抽离为自定义 Hook（如 `useFetch`）。 - **示例**： ```javascript // useCounter.js export function useCounter() { const count = ref(0); const increment = () => count.value++; return { count, increment }; } ``` --- ### **

9. Vue3 中 Teleport 的作用** - 将子组件渲染到 DOM 中的指定容器（如 body）。 - **场景**：模态框、通知提示等需要脱离父组件层级的组件。 - **用法**： ```html

内容
``` --- ### **

10. Vue3 对 TypeScript 的支持** - 使用 TypeScript 重写，提供完整类型定义。 - 组件 Props/Emits 可通过泛型定义： ```typescript defineProps<{ title: string }>(); defineEmits<{ (e: 'submit', data: any): void }>(); ``` --- ### **

11. Vue3 性能优化体现在哪些方面？** - **响应式系统**：Proxy 性能优于 `defineProperty`。 - **编译优化**： - 静态节点提升（Hoist Static），避免重复渲染。 - PatchFlag 标记动态节点，减少 Diff 范围。 - **Tree-shaking**：按需引入 API，减少打包体积。 --- ### **

12. Vue3 中如何获取 DOM 元素？** - 使用 `ref` 声明变量，通过 `ref.value` 访问： ```html ``` --- ### **

13. 对比 Vuex 和 Pinia** - **Vuex**：Vue2 官方状态管理，概念较多（mutations/actions）。 - **Pinia**：Vue3 推荐的状态管理库，API 更简洁，支持 Composition API，无 `mutations`，直接修改状态。 --- ### **

14. Vue3 中的 Suspense 组件** - 用于处理异步组件加载时的等待状态。 - **用法**： ```html <template #default> <template #fallback>

Loading...
``` --- ### **15. 如何处理 Vue3 中的事件监听？** - **移除 `$listeners`**，直接在 `emit` 中定义事件。 - **示例**： ```javascript // 子组件 emit('custom-event', data); // 父组件 <Child @custom-event="handleEvent" /> ``` --- 以上问题覆盖了 Vue3 的核心知识点，建议结合实际项目经验深入理解。

15、

watch和watchEffect的区别？

watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：

  • watch ：既要指明监视的数据源，也要指明监视的回调。

  • 而 watchEffect 可以自动监听数据源作为依赖。不用指明监视哪个数据，监视的回调中用到哪个数据，那就监视哪个数据。

  • watch 可以访问改变之前和之后的值，watchEffect 只能获取改变后的值。

  • watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。

  • watchEffect有点像 computed ：

    • 但 computed 注重的计算出来的值（回调函数的返回值）， 所以必须要写返回值。

    • 而 watcheffect注重的是过程（回调函数的函数体），所以不用写返回值。

16、

谈谈pinia?

Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库，并且 Vue 的官方状态管理库已经更改为了 Pinia。在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5，这也意味不会再出 5 版本了。

优点

  • 更加轻量级，压缩后提交只有1.6kb。

  • 完整的 TS 的支持，Pinia 源码完全由 TS 编码完成。

  • 移除 mutations，只剩下 state 、 actions 、 getters 。

  • 没有了像 Vuex 那样的模块镶嵌结构，它只有 store 概念，并支持多个 store，且都是互相独立隔离的。当然，你也可以手动从一个模块中导入另一个模块，来实现模块的镶嵌结构。

  • 无需手动添加每个 store，它的模块默认情况下创建就自动注册。

  • 支持服务端渲染（SSR）。

  • 支持 Vue DevTools。

  • 更友好的代码分割机制，传送门。

17、EventBus与mitt区别？

Vue2 中我们使用 EventBus 来实现跨组件之间的一些通信，它依赖于 Vue 自带的 $on/$emit/$off 等方法，这种方式使用非常简单方便，但如果使用不当也会带来难以维护的毁灭灾难。

而 Vue3 中移除了这些相关方法，这意味着 EventBus 这种方式我们使用不了， Vue3 推荐尽可能使用 props/emits、provide/inject、vuex 等其他方式来替代。

当然，如果 Vue3 内部的方式无法满足你，官方建议使用一些外部的辅助库，例如：mitt。

优点

  • 非常小，压缩后仅有 200 bytes。
  • 完整 TS 支持，源码由 TS 编码。
  • 跨框架，它并不是只能用在 Vue 中，React、JQ 等框架中也可以使用。
  • 使用简单，仅有 on、emit、off 等少量实用API。
script setup 是干啥的？

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。使用 script setup 语法糖的特点：

  • 属性和方法无需返回，可以直接使用。
  • 引入组件的时候，会自动注册，无需通过 components 手动注册。
  • 使用 defineProps 接收父组件传递的值。
  • useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件。
  • 默认不会对外暴露任何属性，如果有需要可使用 defineExpose 。
18、v-if 和 v-for 的优先级哪个高？

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

setup中如何获得组件实例？

在 setup 函数中，你可以使用 getCurrentInstance() 方法来获取组件实例。getCurrentInstance() 方法返回一个对象，该对象包含了组件实例以及其他相关信息。

以下是一个示例：

javascript 体验AI代码助手 代码解读复制代码import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    // ...

    return {
      instance
    };
  }
};

在上面的示例中，我们使用 getCurrentInstance() 方法获取当前组件实例。然后，我们可以将该实例存储在一个常量中，并在 setup 函数的返回值中返回。

需要注意的是，getCurrentInstance() 方法只能在 setup 函数中使用，而不能在组件的生命周期方法（如 created、mounted 等方法）中使用。另外，需要注意的是，如果在 setup 函数返回之前访问了 instance 对象，那么它可能是 undefined ，因此我们需要对其进行处理。

19、webpack5的新特性

在Webpack 5中，引入了许多新的特性和改进，以进一步提升开发体验和构建性能。下面是一些Webpack 5新增的主要特性：

  1. 持久化缓存（Persistent Caching）：

    • 通过cache-loader或webpack自身的缓存功能，可以显著提高构建速度。Webpack 5内置了缓存机制，可以在多次构建之间缓存模块，减少重复编译的时间。

  2. 模块联邦（Module Federation）：

    • 允许不同的构建产物（如微前端应用）共享JavaScript模块，而无需将它们打包到一起。这通过ModuleFederationPlugin实现，使得构建更加灵活和模块化。

  3. 资源模块（Asset Modules）：

    • 在Webpack 5中，资源文件（如图片、字体等）可以通过新的资源模块类型（asset modules）更直接地处理。这简化了配置，并且可以更灵活地处理资源文件。

  4. 改进的 Tree Shaking：

    • Webpack 5进一步改进了Tree Shaking功能，可以更好地移除未使用的导出，减少最终包的大小。

  5. 改进的代码拆分（Code Splitting）：

    • 通过import()函数和动态导入，Webpack 5支持更细粒度的代码拆分，帮助实现懒加载和按需加载，优化应用的加载性能。

  6. 更好的长期缓存（Long Term Caching）：

    • 通过使用内容哈希（contenthash）和更好的文件名策略，Webpack 5帮助开发者生成更稳定的长期缓存标识，减少缓存失效的问题。

  7. 内置的资源优化：

    • 例如，对于图片、字体等资源，Webpack 5可以自动进行压缩和优化处理，无需额外插件。

  8. 更好的错误信息：

    • Webpack 5提供了更清晰和详细的错误信息，帮助开发者更快地定位和解决问题。

  9. 更好的兼容性和性能：

    • 对Node.js环境的兼容性进行了改进，同时优化了构建性能，尤其是在处理大型项目时。

  10. 实验性功能：

*   Webpack 5还引入了一些实验性功能，如`Chunk Graph`（一种用于分析和优化chunk的策略），这些功能可以通过配置启用。

使用这些新特性，开发者可以更加高效地构建和维护他们的Web应用。要充分利用这些特性，建议查阅最新的Webpack文档，了解每个特性的详细用法和配置方式。同时，考虑到Webpack的配置可能较为复杂，初学者可能需要一定的时间来熟悉和掌握这些新特性

avatar
文章
阅读
粉丝