【前端框架】Vue3 面试题深度解析

本文详细讲解了VUE3相关的面试题，从基础到进阶到高级，分别都有涉及，希望对你有所帮助！

基础题目

1. 简述 Vue3 与 Vue2 相比有哪些主要变化？

答案：

• 响应式系统：Vue2 使用 Object.defineProperty() 实现响应式，有一定局限性，如无法检测对象属性的添加和删除；Vue3 采用 Proxy 对象，能全面拦截对象操作，解决了上述问题。
• API 风格：Vue2 主要使用选项式 API，逻辑分散在不同选项中；Vue3 引入组合式 API，可按逻辑功能组织代码，提高复用性和可维护性。
• 新特性：Vue3 引入了 Teleport（可将组件模板渲染到指定 DOM 位置）、Suspense（处理异步组件加载状态）等新特性。
• 性能优化：Vue3 对虚拟 DOM 算法进行了优化，采用静态提升、事件缓存等技术，提升了渲染性能。
• TypeScript 支持：Vue3 从设计上更好地支持 TypeScript，组合式 API 与 TypeScript 配合更默契，类型推导更友好。

2. 如何创建一个 Vue3 项目？

答案：

• 使用 Vite：Vite 是 Vue3 推荐的构建工具，具有快速冷启动和即时热更新的优点。安装命令如下：

npm init vite@latest my - vue3 - project -- --template vue
cd my - vue3 - project
npm install
npm run dev

• 使用 Vue CLI：如果已全局安装 Vue CLI，可使用以下命令创建项目：

vue create my - vue3 - project

在创建过程中，可选择 Vue3 预设。

3. 解释 ref 和 reactive 的区别和使用场景。

答案：

• 区别
  • ref 主要用于创建单个响应式数据，可用于基本数据类型和复杂数据类型。访问和修改 ref 定义的数据时，需要通过 .value 属性。
  • reactive 用于创建响应式对象或数组，直接访问对象属性即可触发响应式更新。
• 使用场景
  • ref 适用于创建简单的响应式变量，如计数器、表单输入值等。
  • reactive 适用于管理复杂的响应式状态，如对象或数组形式的状态数据。

示例代码：

<template><div><p>{{ count.value }}</p><p>{{ user.name }}</p></div>
</template><script setup>
import { ref, reactive } from 'vue';const count = ref(0);
const user = reactive({ name: 'John' });
</script>

进阶题目

1. 如何在 Vue3 中使用组合式 API 实现组件逻辑复用？

答案：
可将相关逻辑封装在一个函数中，然后在多个组件中复用该函数。以下是一个简单的计数器逻辑复用示例：

// useCounter.js
import { ref } from 'vue';export const useCounter = () => {const count = ref(0);const increment = () => {count.value++;};const decrement = () => {count.value--;};return {count,increment,decrement};
};

在组件中使用：

<template><div><p>{{ counter.count }}</p><button @click="counter.increment">Increment</button><button @click="counter.decrement">Decrement</button></div>
</template><script setup>
import { useCounter } from './useCounter.js';const counter = useCounter();
</script>

2. 解释 Teleport 和 Suspense 的使用场景。

答案：

• Teleport：适用于需要将组件的一部分模板渲染到 DOM 其他位置的场景，如模态框、提示框等。由于这些元素可能需要覆盖在整个页面之上，使用 Teleport 可以将其渲染到 body 元素下，避免受到父组件样式的影响。
  示例代码：

<template><div><button @click="showModal = true">Open Modal</button><Teleport to="body"><div v - if="showModal" class="modal"><h2>Modal Title</h2><p>Modal content...</p><button @click="showModal = false">Close</button></div></Teleport></div>
</template><script setup>
import { ref } from 'vue';const showModal = ref(false);
</script>

• Suspense：用于处理异步组件的加载状态。当组件依赖异步数据时，在数据加载完成之前，可以显示一个加载状态，避免页面出现空白。
  示例代码：

<template><Suspense><template #default><AsyncComponent /></template><template #fallback><p>Loading...</p></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue';const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));
</script>

3. 如何在 Vue3 中使用路由守卫？

答案：
在 Vue3 中使用 Vue Router 4.x 版本，路由守卫的使用方式如下：

• 全局前置守卫：在路由跳转前进行一些验证或处理。

import { createRouter, createWebHistory } from 'vue - router';
import Home from './views/Home.vue';
import About from './views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});router.beforeEach((to, from, next) => {// 进行验证逻辑if (to.meta.requiresAuth &&!isAuthenticated()) {next('/login');} else {next();}
});export default router;

• 路由独享守卫：只对某个路由生效。

const routes = [{path: '/dashboard',name: 'Dashboard',component: Dashboard,beforeEnter: (to, from, next) => {// 路由独享守卫逻辑if (!isAdmin()) {next('/');} else {next();}}}
];

• 组件内守卫：在组件中定义的守卫。

<template><div><!-- 组件内容 --></div>
</template><script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue - router';onBeforeRouteLeave((to, from) => {// 离开当前路由前的逻辑return confirm('Are you sure you want to leave?');
});onBeforeRouteUpdate((to, from) => {// 当前路由参数更新时的逻辑
});
</script>

高级题目

1. 如何优化 Vue3 项目的性能？

答案：

• 虚拟 DOM 优化
  • 使用 key：在列表渲染时，为每个列表项提供唯一的 key，帮助 Vue 更准确地识别元素，减少不必要的 DOM 操作。
  • 静态提升：对于模板中的静态节点，Vue3 会自动进行静态提升，将其提取出来只创建一次，避免重复创建和比较。
• 代码分割与懒加载
  • 路由组件懒加载：使用动态导入实现路由组件的懒加载，只有在用户访问该路由时才加载对应的组件。

  const routes = [{path: '/about',name: 'About',component: () => import('../views/About.vue')}
  ];
  

  • 异步组件：对于一些大型组件或不常用的组件，使用 defineAsyncComponent 进行异步加载。
• 响应式数据优化
  • 避免创建过多不必要的响应式数据，对于不需要响应式的纯计算数据，使用普通函数处理。
  • 合理使用 ref 和 reactive，根据数据类型和使用场景选择合适的响应式创建方式。
• 缓存组件：使用 <KeepAlive> 组件缓存不活跃的组件实例，避免重复渲染，提高组件切换的性能。

<template><div><button @click="toggleComponent">Toggle Component</button><KeepAlive><component :is="currentComponent"></component></KeepAlive></div>
</template><script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';const currentComponent = ref('ComponentA');
const toggleComponent = () => {currentComponent.value = currentComponent.value === 'ComponentA'? 'ComponentB' : 'ComponentA';
};
</script>

2. 如何在 Vue3 中进行状态管理，除了 Vuex 还有其他选择吗？

答案：

• Vuex：Vuex 是 Vue.js 官方的状态管理库，在 Vue3 中使用 Vuex 4.x 版本。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Pinia：Pinia 是一个轻量级的状态管理库，专为 Vue3 设计。它具有更简洁的 API、更好的 TypeScript 支持和模块化的设计。使用 Pinia 创建一个 store 示例如下：

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}},getters: {doubleCount() {return this.count * 2;}}
});

在组件中使用：

<template><div><p>{{ counterStore.count }}</p><p>{{ counterStore.doubleCount }}</p><button @click="counterStore.increment">Increment</button></div>
</template><script setup>
import { useCounterStore } from './counterStore';const counterStore = useCounterStore();
</script>

3. 描述 Vue3 中组合式 API 的执行顺序和生命周期钩子的使用。

答案：

• 执行顺序：在组件创建时，setup 函数首先执行，它是组合式 API 的入口。在 setup 函数中，可以进行响应式数据的创建、生命周期钩子的注册等操作。setup 函数执行完成后，才会进入组件的其他生命周期阶段。
• 生命周期钩子的使用：Vue3 对生命周期钩子进行了重命名，并且可以在组合式 API 中使用新的方式来调用。

<template><div><!-- 组件内容 --></div>
</template><script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue';onMounted(() => {// 组件挂载后执行console.log('Component mounted');
});onUpdated(() => {// 组件更新后执行console.log('Component updated');
});onUnmounted(() => {// 组件卸载前执行console.log('Component unmounted');
});
</script>

原理题目

1. 解释 Vue3 响应式系统的原理。

答案：
Vue3 的响应式系统基于 Proxy 对象实现。当使用 reactive 或 ref 创建响应式数据时，Vue 会创建一个 Proxy 代理对象。

• reactive：对于对象或数组，reactive 会创建一个 Proxy 代理，拦截对象的属性访问、赋值、删除等操作。当访问对象属性时，会触发 get 拦截器，进行依赖收集；当修改对象属性时，会触发 set 拦截器，通知所有依赖该属性的副作用函数进行更新。
• ref：ref 内部会将基本数据类型包装成一个对象，同样使用 Proxy 进行代理。访问和修改 ref 的 .value 属性时，会触发相应的拦截器，实现响应式更新。
  依赖收集和更新的过程是通过 effect 函数和 track、trigger 函数完成的。effect 函数用于创建副作用函数，track 函数用于收集依赖，trigger 函数用于触发依赖更新。

2. 简述 Vue3 虚拟 DOM 的工作原理。

答案：

• 虚拟 DOM 的创建：Vue3 模板会被编译成渲染函数，渲染函数返回一个虚拟 DOM 树。虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。
• 虚拟 DOM 的比较：当组件状态发生变化时，会重新调用渲染函数生成新的虚拟 DOM 树。Vue3 会使用 diff 算法比较新旧虚拟 DOM 树，找出差异部分。为了提高比较效率，Vue3 采用了静态提升、事件缓存等优化技术。
• 真实 DOM 的更新：根据 diff 算法的结果，只对真实 DOM 中发生变化的部分进行更新，避免了全量更新带来的性能开销。

3. 解释 Vue3 中 setup 函数的作用和执行时机。

答案：

• 作用：setup 函数是组合式 API 的入口，用于组件的初始化和逻辑组合。在 setup 函数中，可以创建响应式数据、定义方法、注册生命周期钩子等。它返回的数据和方法可以在模板中使用。
• 执行时机：setup 函数在组件实例初始化之后，beforeCreate 钩子之前执行。此时组件的 data 和 methods 选项还未初始化，因此在 setup 函数中无法访问 this。