Vue 3 是一种用于构建用户界面的 JavaScript 框架。它采用了许多新的改进，包括更好的性能、更小的包大小以及更多的开发者友好的特性。面试时，常会问到关于 Vue 3 的问题，下面是一些常见的面试题和示例讲解：
-
Vue 3 的新特性有哪些？
- Composition API：引入了类似 React Hooks 的 Composition API，使得组件逻辑更加模块化和可重用；
- 响应式系统的改进：使用了 Proxy 替代 Object.defineProperty，提升了性能和可扩展性；
- 更好的 Tree Shaking 支持：使用了静态标记和缓存机制来减小包大小；
- Fragment、Teleport 和 Suspense 组件：使得组件的结构和异步加载更加灵活；
- 更强大的 TypeScript 支持。
-
如何在 Vue 3 中使用 Composition API？ Composition API 允许我们将逻辑代码按逻辑功能进行组织和重用。通过引入
setup函数，在该函数内部使用reactive、computed、watch等函数来定义响应式状态和副作用。示例如下：
import { reactive, computed, watch } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
const doubleCount = computed(() => state.count * 2);
watch(() => {
console.log('count changed:', state.count);
});
return {
state,
doubleCount
};
}
}
-
如何动态绑定样式和类名？ 在 Vue 3 中，可以使用新的
:class和:style指令来动态绑定样式和类名。示例如下：
<template>
<div :class="[isActive ? 'active' : '']">Dynamic Class</div>
<div :style="{ color: textColor }">Dynamic Style</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const isActive = ref(true);
const textColor = ref('red');
return {
isActive,
textColor
};
}
}
</script>
这些是一些关于 Vue 3 的面试题和示例讲解，希望对你有所帮助。记得根据实际情况和经验，适当展开回答，以展示你对 Vue 3 的理解和熟练程度。
