【前端框架】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 = () => {