当前位置：首页 > news >正文

vue3常见面试题

news 来源：原创 2025/5/9 4:29:34

当然，以下是关于 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>