跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

Vue3 前端开发常用 20 道面试题及代码解析

综述由AI生成总结了 Vue 3 前端开发的 20 道高频面试题，涵盖核心特性如 Composition API、响应式系统（ref/reactive）、生命周期钩子、组件通信、Teleport、Suspense 及自定义指令等知识点。每道题均提供详细解释与代码示例，旨在帮助开发者准备技术面试，深入理解 Vue 3 相比 Vue 2 的改进点及新语法糖的使用。

协议工匠发布于 2026/4/6更新于 2026/5/1629 浏览
Vue3 前端开发常用 20 道面试题及代码解析
1. Vue 3 和 Vue 2 的区别是什么？

问题： 解释 Vue 3 相比 Vue 2 的主要改进点。

答案：

特性Vue 2Vue 3
响应式系统Object.definePropertyProxy
架构单一源码模块化架构（Tree-shakable）
Composition API❌✅
Fragment❌✅
Suspense 组件❌✅
自定义渲染器支持有限更灵活
支持 TypeScript❌（需额外配置）✅ 原生支持
// Vue 3 示例：使用 Composition API
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    onMounted(() => {
      console.log('组件挂载');
    });
    return { count, increment };
  }
};
2. 如何在 Vue 3 中创建一个响应式对象？

问题： 使用 reactive() 创建一个响应式用户对象。

答案： 使用 reactive() 创建深层响应式对象。

import { reactive } from 'vue';
const user = ({ : , :  });
reactive
name
'Alice'
age
25
3. ref() 和 reactive() 的区别？

问题： 写出两者的不同点及适用场景。

答案：

  • ref()：适用于基本类型或单个值。
  • reactive()：适用于对象或复杂结构。
import { ref, reactive } from 'vue';
const count = ref(0); // 基本类型
const user = reactive({ name: 'Bob' }); // 对象

count.value++; // 必须用 .value
user.name = 'Tom'; // 不需要 .value
4. Vue 3 中如何监听数据变化？

问题： 使用 watchEffect 和 watch 的方式分别写出监听逻辑。

答案：

  • watchEffect：自动追踪依赖并执行副作用。
  • watch：手动指定监听的目标。
import { ref, watchEffect, watch } from 'vue';
const count = ref(0);

// watchEffect
watchEffect(() => {
  console.log('Count changed:', count.value);
});

// watch
watch(count, (newVal, oldVal) => {
  console.log(`从 ${oldVal} 变为 ${newVal}`);
});
5. Vue 3 的生命周期钩子有哪些？如何使用？

问题： 在 setup() 中使用 onMounted 生命周期钩子。

答案： Vue 3 提供了与 Vue 2 类似的生命周期钩子，但必须从 vue 导入使用。

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  }
};
6. Vue 3 中如何进行父子组件通信？

问题： 父组件向子组件传递数据，并触发事件。

答案： 使用 props 接收父组件数据，使用 emit 触发事件。

// 子组件 Child.vue
export default {
  props: ['title'],
  emits: ['update'],
  setup(props, { emit }) {
    function handleClick() {
      emit('update', 'New Value');
    }
    return { handleClick };
  }
};

// 父组件 Parent.vue
<template>
  <Child :title="msg" @update="handleUpdate" />
</template>
<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return { msg: 'Hello' };
  },
  methods: {
    handleUpdate(value) {
      console.log('收到更新:', value);
    }
  }
};
</script>
7. Vue 3 的 setup() 函数的作用是什么？

问题： setup() 是什么？为什么它很重要？

答案：

  • setup() 是 Vue 3 Composition API 的入口函数。
  • 替代 Vue 2 中的 data、methods、computed 等选项。
  • 更好地组织逻辑复用和模块化代码。
export default {
  setup() {
    const message = ref('Hello Vue 3');
    function changeMessage() {
      message.value = 'Updated!';
    }
    return { message, changeMessage };
  }
};
8. Vue 3 中如何实现响应式计算属性？

问题： 使用 computed() 实现一个计算属性。

答案： 使用 computed() 创建响应式计算属性。

import { ref, computed } from 'vue';
export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');
    const fullName = computed(() => `${firstName.value}${lastName.value}`);
    return { firstName, lastName, fullName };
  }
};
9. provide() 和 inject() 的作用是什么？

问题： 如何跨层级传递数据？

答案： 用于祖先组件向后代组件注入依赖，不通过 props 逐层传递。

// 祖先组件
import { provide, ref } from 'vue';
export default {
  setup() {
    const theme = ref('dark');
    provide('theme', theme);
    return { theme };
  }
};

// 后代组件
import { inject } from 'vue';
export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
};
10. Vue 3 中如何使用插槽（Slot）？

问题： 实现一个默认插槽和具名插槽。

答案：

<!-- 父组件 -->
<template>
  <Card>
    <template #default>这是默认插槽内容</template>
    <template #header>这是头部插槽</template>
  </Card>
</template>

<!-- 子组件 Card.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>
11. Vue 3 中的 Teleport 有什么用途？

问题： 如何将模态框渲染到 <body> 下？

答案： Teleport 可以将组件渲染到 DOM 中任意位置。

<template>
  <teleport to="body">
    <div v-if="showModal" class="modal">这是一个模态框</div>
  </teleport>
</template>
12. Vue 3 中的 Suspense 是什么？怎么用？

问题： 异步加载组件时显示加载状态。

答案： Suspense 是一个内置组件，用于处理异步依赖。

<template>
  <suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>加载中...</template>
  </suspense>
</template>
<script>
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>
13. Vue 3 中的 defineProps 和 defineEmits 是什么？

问题： 在 <script setup> 中如何声明 props 和 emits？

答案： 在 <script setup> 中直接使用 defineProps 和 defineEmits。

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps(['title']);
const emit = defineEmits(['update']);
function updateTitle() {
  emit('update', 'New Title');
}
</script>
<template>
  <h1>{{ title }}</h1>
  <button @click="updateTitle">更新标题</button>
</template>
14. Vue 3 中如何动态绑定样式？

问题： 动态设置背景颜色。

答案： 使用 :style 绑定对象。

<template>
  <div :style="{ backgroundColor: color }">{{ text }}</div>
</template>
<script>
export default {
  data() {
    return {
      color: 'lightblue',
      text: '动态样式'
    };
  }
};
</script>
15. Vue 3 中如何注册全局组件？

问题： 注册一个可全局使用的按钮组件。

答案：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);
app.component('MyButton', MyButton);
app.mount('#app');

<!-- 使用 -->
<template>
  <my-button label="提交" />
</template>
16. Vue 3 中如何实现自定义指令？

问题： 实现一个高亮指令 v-highlight。

答案：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = '#f0e68c';
  }
});
app.mount('#app');

<!-- 使用 -->
<template>
  <p v-highlight>这段文字被高亮了</p>
</template>
17. Vue 3 中的 nextTick() 怎么用？

问题： 修改 DOM 后等待更新完成。

答案： 使用 nextTick() 确保 DOM 更新完成后执行操作。

import { nextTick } from 'vue';
async function updateData() {
  this.message = '更新后的内容';
  await nextTick();
  console.log('DOM 已更新');
}
18. Vue 3 中如何实现组件懒加载？

问题： 使用异步组件实现路由懒加载。

答案： 使用 defineAsyncComponent 实现懒加载。

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./components/LazyComponent.vue'));
export default {
  components: { AsyncComponent }
};
19. Vue 3 中的 emitter 是什么？如何使用？

问题： 实现非父子组件之间的通信。

答案： 使用第三方库如 mitt 或 EventBus 实现全局通信。

npm install mitt

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

// 发送事件
import { emitter } from './eventBus';
emitter.emit('update', 'Hello');

// 接收事件
import { emitter } from './eventBus';
emitter.on('update', (msg) => {
  console.log(msg);
});
20. Vue 3 中如何使用 v-model 实现双向绑定？

问题： 实现一个输入框组件的双向绑定。

答案： 使用 modelValue + update:modelValue。

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
};
</script>

📋 总结表格

编号题目描述知识点示例代码常见考察点
1Vue3 与 Vue2 的区别架构升级Proxy, Composition API框架理解
2创建响应式对象reactive()reactive({})数据绑定
3ref() vs reactive()响应式机制ref(0) vs reactive({})数据封装
4数据监听watchEffect, watchwatch(count, () => {...})数据驱动
5生命周期钩子onMounted, onUpdatedonMounted(() => {})组件控制
6组件通信[props]/ emitdefineProps(['name'])组件设计
7setup() 的作用Composition API 入口setup() { return {} }逻辑组织
8计算属性computed()computed(() => a + b)响应式优化
9跨级传参provide/injectprovide('theme', 'dark')数据共享
10插槽使用默认插槽 / 具名插槽<slot name="header" />组件扩展
11Teleport 的用途渲染到其他节点<teleport to="body">...</teleport>DOM 结构优化
12Suspense 的用途异步加载<suspense><template #default>...异步组件
13<script setup> 中的 [props]/ emit快捷方式defineProps(['title'])新语法糖
14动态绑定样式:style:style="{ color: textColor }"样式控制
15全局组件注册component()app.component('MyButton', Button)组件复用
16自定义指令directive()app.directive('highlight', { mounted: ... })扩展能力
17nextTick() 的用途DOM 更新监听await nextTick()渲染流程控制
18组件懒加载异步组件defineAsyncComponent(() => import(...))性能优化
19全局事件通信mittemitter.on('event', fn)跨组件通信
20v-model 的实现双向绑定modelValue, update:modelValue表单组件设计

📌 高频考点补充

考点描述
Composition API替代 Options API，提升逻辑复用
Reactivity APIref, reactive, toRefs, watch, computed
Teleport / Portal渲染到任意 DOM 节点
Fragment支持多个根节点
TypeScript 支持完整 TS 类型推导
Custom Renderer可定制渲染器（如 Canvas、SSR）
性能优化更小的体积、更快的 Diff 算法
组合函数（Composable）封装可复用逻辑
Vue 3 的编译器优化Block Tree、Patch Flags
Vue 3 的生态支持Vite、Pinia、Vue Router 4、Element Plus

目录

  1. 1. Vue 3 和 Vue 2 的区别是什么？
  2. 2. 如何在 Vue 3 中创建一个响应式对象？
  3. 3. ref() 和 reactive() 的区别？
  4. 4. Vue 3 中如何监听数据变化？
  5. 5. Vue 3 的生命周期钩子有哪些？如何使用？
  6. 6. Vue 3 中如何进行父子组件通信？
  7. 7. Vue 3 的 setup() 函数的作用是什么？
  8. 8. Vue 3 中如何实现响应式计算属性？
  9. 9. provide() 和 inject() 的作用是什么？
  10. 10. Vue 3 中如何使用插槽（Slot）？
  11. 11. Vue 3 中的 Teleport 有什么用途？
  12. 12. Vue 3 中的 Suspense 是什么？怎么用？
  13. 13. Vue 3 中的 defineProps 和 defineEmits 是什么？
  14. 14. Vue 3 中如何动态绑定样式？
  15. 15. Vue 3 中如何注册全局组件？
  16. 16. Vue 3 中如何实现自定义指令？
  17. 17. Vue 3 中的 nextTick() 怎么用？
  18. 18. Vue 3 中如何实现组件懒加载？
  19. 19. Vue 3 中的 emitter 是什么？如何使用？
  20. 20. Vue 3 中如何使用 v-model 实现双向绑定？
  21. 📋 总结表格
  22. 📌 高频考点补充
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • 使用 Python 和 AI 搭建智能害虫识别助手
  • 招聘面试中常见的奇葩心理测试解析
  • Linux 一切皆文件：深入理解文件与文件 IO
  • 使用 MCP Server 插件将 Dify 工作流发布为第三方服务
  • 鸿蒙金融理财全栈项目：运维监控、性能优化与安全加固
  • PyQt5 入门实战：环境搭建、布局与常用控件详解
  • C++ 计算思维综合实践 II 课程设计选题与验收标准
  • MySQL 表连接详解：Inner Join、Left Join 与 Right Join
  • ezdxf 库实战：使用 Python 进行 CAD 图纸自动化处理
  • Spring Boot 启动引导类：命名约定与底层启动原理
  • Java 多线程三大特性详解：原子性、可见性、有序性
  • GitHub Actions Windows Server 2022 镜像企业级 CI/CD 配置指南
  • 从三年前端到 CS 硕士：韩国留学经历复盘与职业回归
  • FPGA 入门：基于 Altera EP4CE10 的 LED 点亮工程
  • Linux 部署 RocketMQ 并配置公网访问方案
  • AI 安全研究：基于 PGD 的 Stable Diffusion 视觉提示词注入分析
  • C++ 智能指针与 RAII 资源管理详解
  • 基于 DeepSeek 与 Cursor 构建智能代码审查工具实战
  • ChatGPT 使用教程：深度探索 AI 常用功能
  • GitHub Copilot 网络代理配置与优化实战指南

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online