以下是2025年Vue 3的最新面试题及其详细解答，每个题目都附有代码和注释，确保易懂且详细。题目数量超过50道，涵盖Vue 3的核心概念、Composition API、生态工具等。
1. Vue 3 的主要新特性是什么？
Vue 3 的主要新特性包括：
- Composition API：提供更灵活的代码组织方式。
- 性能优化：使用 Proxy 实现响应式，性能更好。
- Tree-shaking：支持按需引入，减小打包体积。
- TypeScript 支持：对 TypeScript 的支持更好。
- Fragment、Teleport、Suspense：新增内置组件。
2. 什么是 Composition API？
Composition API 是 Vue 3 引入的新特性，允许将逻辑组织为可复用的函数。
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0); // 定义响应式数据
const doubleCount = computed(() => count.value * 2); // 计算属性
function increment() {
count.value++; // 定义方法
}
return { count, doubleCount, increment }; // 返回模板使用的数据和方法
}
};
3. Vue 3 中的 setup 函数是什么？
setup 是 Composition API 的入口函数，在组件创建之前执行。
export default {
setup() {
const message = ref('Hello, Vue 3!'); // 定义响应式数据
return { message }; // 返回模板使用的数据
}
};
4. Vue 3 中的 ref 和 reactive 有什么区别？
ref：用于定义基本类型的响应式数据，通过.value访问。reactive：用于定义对象类型的响应式数据。
import { ref, reactive } from 'vue';
export default {
setup() {
const count = ref(0); // 基本类型
const state = reactive({ name: 'Vue 3' }); // 对象类型
return { count, state };
}
};
5. Vue 3 中的 toRef 和 toRefs 是什么？
toRef：将对象的某个属性转换为ref。toRefs：将整个响应式对象的所有属性转换为ref。
import { reactive, toRef, toRefs } from 'vue';
export default {
setup() {
const state = reactive({ name: 'Vue 3', age: 3 });
const nameRef = toRef(state, 'name'); // 单个属性
const stateRefs = toRefs(state); // 所有属性
return { nameRef, stateRefs };
}
};
6. Vue 3 中的 watch 和 watchEffect 有什么区别？
watch：监听特定数据的变化，适合精确控制。watchEffect：自动监听函数内的响应式数据，适合副作用逻辑。
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log('count 变化了:', newVal); // 监听count
});
watchEffect(() => {
console.log('count 的值是:', count.value); // 自动监听
});
return { count };
}
};
7. Vue 3 中的 provide 和 inject 是什么？
provide 和 inject 用于跨层级组件通信。
// 父组件
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello from parent');
provide('message', message); // 提供数据
}
};
// 子组件
import { inject } from 'vue';
export default {
setup() {
const message = inject('message'); // 注入数据
return { message };
}
};
8. Vue 3 中的 Teleport 是什么？
Teleport 用于将组件渲染到指定 DOM 节点。
<template>
<teleport to="body">
<div>Modal</div>
</teleport>
</template>
9. Vue 3 中的 Suspense 是什么？
Suspense 用于处理异步组件的加载状态。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<p>Loading...</p>
</template>
</Suspense>
</template>
10. Vue 3 中的 Fragment 是什么？
Fragment 允许组件返回多个根元素。
<template>
<div>Hello</div>
<div>Vue 3</div>
</template>
11. Vue 3 中的 v-model 有哪些变化？
Vue 3 支持多个 v-model 绑定。
<template>
<ChildComponent v-model:title="title" v-model:content="content" />
</template>
12. Vue 3 中的 emits 选项是什么？
emits 用于声明组件触发的事件。
export default {
emits: ['update:title'], // 声明事件
setup(props, { emit }) {
function updateTitle() {
emit('update:title', 'New Title'); // 触发事件
}
return { updateTitle };
}
};
13. Vue 3 中的 defineComponent 是什么？
defineComponent 用于定义组件，提供更好的 TypeScript 支持。
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello, Vue 3!');
return { message };
}
});
14. Vue 3 中的 getCurrentInstance 是什么？
getCurrentInstance 用于获取当前组件实例。
import { getCurrentInstance } from 'vue';
export default {
setup() {
const instance = getCurrentInstance();
console.log(instance); // 当前组件实例
}
};
15. Vue 3 中的 nextTick 是什么？
nextTick 用于在 DOM 更新后执行回调。
import { nextTick } from 'vue';
export default {
setup() {
nextTick(() => {
console.log('DOM 已更新');
});
}
};
16. Vue 3 中的 shallowRef 和 shallowReactive 是什么？
shallowRef：只对.value进行响应式处理。shallowReactive：只对对象的第一层属性进行响应式处理。
import { shallowRef, shallowReactive } from 'vue';
export default {
setup() {
const count = shallowRef(0); // 基本类型
const state = shallowReactive({ name: 'Vue 3', info: { age: 3 } }); // 对象类型
return { count, state };
}
};
17. Vue 3 中的 readonly 是什么？
readonly 用于创建只读的响应式对象。
import { reactive, readonly } from 'vue';
export default {
setup() {
const state = reactive({ name: 'Vue 3' });
const readOnlyState = readonly(state); // 只读对象
return { readOnlyState };
}
};
18. Vue 3 中的 computed 是什么？
computed 用于定义计算属性。
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2); // 计算属性
return { count, doubleCount };
}
};
19. Vue 3 中的 watch 如何监听多个数据？
通过数组传入多个监听源。
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const name = ref('Vue 3');
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log('count 或 name 变化了');
});
return { count, name };
}
};
20. Vue 3 中的 watchEffect 如何停止监听？
通过调用 watchEffect 返回的停止函数。
import { ref, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
const stop = watchEffect(() => {
console.log('count 的值是:', count.value);
});
stop(); // 停止监听
}
};
21. Vue 3 中的 onMounted 是什么？
onMounted 是生命周期钩子，在组件挂载后执行。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('组件已挂载');
});
}
};
22. Vue 3 中的 onUnmounted 是什么？
onUnmounted 是生命周期钩子，在组件卸载后执行。
import { onUnmounted } from 'vue';
export default {
setup() {
onUnmounted(() => {
console.log('组件已卸载');
});
}
};
23. Vue 3 中的 onUpdated 是什么？
onUpdated 是生命周期钩子，在组件更新后执行。
import { onUpdated } from 'vue';
export default {
setup() {
onUpdated(() => {
console.log('组件已更新');
});
}
};
24. Vue 3 中的 onBeforeMount 是什么？
onBeforeMount 是生命周期钩子，在组件挂载前执行。
import { onBeforeMount } from 'vue';
export default {
setup() {
onBeforeMount(() => {
console.log('组件即将挂载');
});
}
};
25. Vue 3 中的 onBeforeUpdate 是什么？
onBeforeUpdate 是生命周期钩子，在组件更新前执行。
import { onBeforeUpdate } from 'vue';
export default {
setup() {
onBeforeUpdate(() => {
console.log('组件即将更新');
});
}
};
26. Vue 3 中的 onBeforeUnmount 是什么？
onBeforeUnmount 是生命周期钩子，在组件卸载前执行。
import { onBeforeUnmount } from 'vue';
export default {
setup() {
onBeforeUnmount(() => {
console.log('组件即将卸载');
});
}
};
27. Vue 3 中的 onErrorCaptured 是什么？
onErrorCaptured 是生命周期钩子，用于捕获子组件的错误。
import { onErrorCaptured } from 'vue';
export default {
setup() {
onErrorCaptured((err, instance, info) => {
console.log('捕获到错误:', err);
});
}
};
28. Vue 3 中的 onRenderTracked 是什么？
onRenderTracked 是调试钩子，用于跟踪渲染依赖。
import { onRenderTracked } from 'vue';
export default {
setup() {
onRenderTracked((event) => {
console.log('跟踪到依赖:', event);
});
}
};
29. Vue 3 中的 onRenderTriggered 是什么？
onRenderTriggered 是调试钩子，用于触发渲染依赖。
import { onRenderTriggered } from 'vue';
export default {
setup() {
onRenderTriggered((event) => {
console.log('触发依赖:', event);
});
}
};
30. Vue 3 中的 useStore 是什么？
useStore 是 Vuex 4 提供的 Composition API 钩子。
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const count = computed(() => store.state.count);
return { count };
}
};
31. Vue 3 中的 useRouter 和 useRoute 是什么？
useRouter：获取路由实例。useRoute：获取当前路由信息。
import { useRouter, useRoute } from 'vue-router';
export default {
setup() {
const router = useRouter();
const route = useRoute();
function goHome() {
router.push('/');
}
return { goHome, route };
}
};
32. Vue 3 中的 v-bind 和 v-model 有什么区别？
v-bind：单向绑定，数据变化影响视图。v-model：双向绑定，数据和视图相互影响。
33. Vue 3 中的 v-for 和 v-if 的优先级是什么？
v-if 的优先级高于 v-for。
34. Vue 3 中的 v-slot 是什么？
v-slot 用于定义插槽内容。
<template>
<MyComponent>
<template v-slot:header>
<h1>Header</h1>
</template>
</MyComponent>
</template>
35. Vue 3 中的 v-on 有哪些修饰符？
常用修饰符：
.stop：阻止事件冒泡。.prevent：阻止默认行为。.capture：使用捕获模式。.self：只在事件目标自身触发。
36. Vue 3 中的 v-bind 有哪些修饰符？
常用修饰符：
.prop：绑定为 DOM 属性。.camel：将属性名转换为驼峰式。
37. Vue 3 中的 v-model 有哪些修饰符？
常用修饰符：
.lazy：输入完成后更新。.number：将输入转为数字。.trim：去除首尾空格。
38. Vue 3 中的 v-pre 是什么？
v-pre 用于跳过元素和子元素的编译。
<div v-pre>{{ message }}</div> <!-- 不会编译 -->
39. Vue 3 中的 v-once 是什么？
v-once 用于只渲染元素和组件一次。
<div v-once>{{ message }}</div> <!-- 只渲染一次 -->
40. Vue 3 中的 v-cloak 是什么？
v-cloak 用于隐藏未编译的模板。
<div v-cloak>{{ message }}</div>
<style>
[v-cloak] {
display: none;
}
</style>
41. Vue 3 中的 v-is 是什么？
v-is 用于动态渲染组件。
<component v-is="currentComponent"></component>
42. Vue 3 中的 v-memo 是什么？
v-memo 用于优化渲染性能，缓存组件。
<div v-memo="[dependency]">{{ message }}</div>
43. Vue 3 中的 v-bind 如何绑定样式？
通过对象或数组绑定样式。
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
44. Vue 3 中的 v-bind 如何绑定类？
通过对象或数组绑定类。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
45. Vue 3 中的 v-bind 如何绑定属性？
通过 v-bind 绑定属性。
<img :src="imageSrc" :alt="imageAlt" />
46. Vue 3 中的 v-bind 如何绑定事件？
通过 v-on 绑定事件。
<button @click="handleClick">Click</button>
47. Vue 3 中的 v-bind 如何绑定表单输入？
通过 v-model 绑定表单输入。
<input v-model="message" />
48. Vue 3 中的 v-bind 如何绑定复选框？
通过 v-model 绑定复选框。
<input type="checkbox" v-model="isChecked" />
49. Vue 3 中的 v-bind 如何绑定单选按钮？
通过 v-model 绑定单选按钮。
<input type="radio" v-model="selected" value="A" />
50. Vue 3 中的 v-bind 如何绑定下拉框？
通过 v-model 绑定下拉框。
<select v-model="selected">
<option value="A">A</option>
<option value="B">B</option>
</select>
以上是50道Vue 3的最新面试题及其详细解答，涵盖了Vue 3的核心概念、Composition API、生态工具等。希望对你的面试准备有所帮助！
