vue3常见面试题

当然，以下是关于 Vue 3 的一些常见面试题及其答案：

1. Vue 3 相比 Vue 2 有哪些主要改进？

性能提升：Vue 3 在编译时做了更多的优化，比如静态提升（hoisting static nodes）、事件监听缓存等。
更好的 TypeScript 支持：Vue 3 从设计之初就考虑了 TypeScript 的支持，提供了更好的类型推断和类型检查。
组合式 API (Composition API)：引入了 setup 函数和组合式 API，使得逻辑复用更加灵活。
更好的 Tree-shaking 支持：Vue 3 的模块化设计使得 Tree-shaking 更加有效，减少了打包后的体积。
响应式系统优化：Vue 3 使用了 Proxy 替代 Vue 2 的 Object.defineProperty，提供了更好的性能和更多的功能。

2. 什么是组合式 API (Composition API)？

组合式 API 是 Vue 3 引入的一种新的代码组织方式，通过 setup 函数来组织逻辑。它允许开发者将相关的逻辑代码组合在一起，而不是按照选项（如 data、methods、computed 等）进行组织。
优点：
- 逻辑复用：通过组合函数（composables）可以更方便地复用逻辑。
- 更好的类型推断：在 TypeScript 中，组合式 API 提供了更好的类型推断。
- 代码组织：对于大型组件，组合式 API 可以使代码更易于阅读和维护。

3. 如何在 Vue 3 中使用组合式 API？

基本用法：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue'export default {setup() {const count = ref(0)const increment = () => {count.value++}return {count,increment}}
}
</script>

4. Vue 3 中的响应式系统是如何工作的？

Vue 3 使用 Proxy 对象来实现响应式系统，替代了 Vue 2 中的 Object.defineProperty。
优点：
- 性能更好：Proxy 可以监听对象的所有操作，包括属性的添加和删除。
- 支持数组：Proxy 对数组的操作更加高效。
- 更好的类型支持：Proxy 提供了更好的 TypeScript 支持。

5. 什么是 Teleport 组件？

Teleport 组件允许你将组件的内容渲染到 DOM 中的另一个位置，而不改变组件的逻辑结构。

用法：

<template><button @click="open = true">Open Modal</button><teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></teleport>
</template><script>
import { ref } from 'vue'export default {setup() {const open = ref(false)return {open}}
}
</script>

6. Vue 3 中的 Fragments 是什么？

Fragments 允许组件返回多个根节点，而不需要额外的包裹元素。

用法：

<template><header>Header</header><main>Main content</main><footer>Footer</footer>
</template>

7. Vue 3 中的 Suspense 组件是什么？

Suspense 组件用于处理异步依赖，比如异步组件加载时的加载状态。

用法：

<template><suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template></suspense>
</template>

8. Vue 3 中的全局 API 变化有哪些？

全局 API 的变化：Vue 3 将全局 API 移动到了 app 实例上，例如 Vue.component 变成了 app.component，Vue.directive 变成了 app.directive 等。

创建应用实例：

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.component('MyComponent', MyComponent)
app.directive('focus', focusDirective)app.mount('#app')

9. Vue 3 中的 Composition API 和 Options API 可以混用吗？

可以混用：Vue 3 支持在同一个组件中同时使用 Composition API 和 Options API。

示例：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button><p>{{ message }}</p></div>
</template><script>
import { ref } from 'vue'export default {data() {return {message: 'Hello Vue 3!'}},setup() {const count = ref(0)const increment = () => {count.value++}return {count,increment}}
}
</script>