【前端Vue3】必考 20 道面试题（含详细代码解析）

涵盖 Vue 3 的核心特性如 Composition API、响应式系统（ref / reactive）、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点

1. Vue 3 和 Vue 2 的区别是什么？

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

答案：

// 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 };
}
};

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

答案：

<!– 父组件 –>
<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 有什么用途？

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

答案： 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>
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>

📋 总结表格

📌 高频考点补充

“你是不是也有过这样的经历？

我完全理解，因为我曾经也是这样，在面试中屡屡碰壁。后来，我系统地复盘了BAT等大厂的面试套路，并和几位面试官朋友深聊后，才发现面试是有‘通关秘籍’的。

我把所有这些核心要点，整理成了1份 《程序员面试通关集》 ，里面不仅有大厂必考算法题的精讲，更重要的是：

• 【项目亮点提炼法】：教你如何将平平无奇的项目，包装成让面试官眼前一亮的经验。
• 【系统设计万能模板】：面对“如何设计一个Twitter”这种问题，不再慌张，有条理地拆解。
• 【薪资谈判技巧】：如何在最后一步多争取10%-30%的薪资涨幅。
• 【高频面试题灵魂四问】：不只是给答案，而是教你面试官的考察逻辑，举一反三。

文末

本人浪迹于各个大厂之间，经常会分享一些高频繁的面试题；希望能给到大家一些帮助。

💡点赞、关注不迷路！助博主一臂之力，电子助力干货无尽！🎯