zerojs前端面试题系列--vue3篇（1）-CSDN博客

本文链接：https://blog.csdn.net/weixin_43711004/article/details/134015209

1. 什么是Vue3，与Vue2有哪些不同？

Vue3是Vue.js的下一个主要版本，是一个更加现代化、高性能、更易扩展的版本。Vue3与Vue2最大的不同点在于其使用了全新的响应式系统，使其在性能方面很大程度上得到改善。以下是Vue3的一些新特性:

更快的性能：Vue3采用了“响应式系统重写”的方法来提高性能。Vue3使用Proxy代理对象来跟踪响应式依赖关系，比Vue2使用的Object.defineProperty方法更高效。
更小的体积：Vue3的体积比Vue2小了30%左右，这是通过删除一些过时的API和优化构建管道来实现的。
更好的TypeScript支持：Vue3提供了更好的TypeScript支持，包括类型定义和测试工具。
更好的组件抽象：Vue3引入了Composition API，这使得组件逻辑变得更加抽象化和可复用。Composition API可以让开发者更好的组织代码，使得组件更加容易维护和理解。
更好的Tree-shaking支持：Vue3对模块的描述更加精细，可以在构建时进行Tree-shaking操作，以减少打包后的代码体积。
更好的渲染函数支持：Vue3将渲染函数重构为一个基于函数的API，这使得渲染函数更加直观和易于使用。

2. 什么是Vue3的Composition API？与Options API相比有什么优势？

Composition API是Vue3中新增的API，它基于函数式编程的思想，将组件的逻辑复用和可读性进行了优化。Composition API与Options API相比，有以下优势：

逻辑复用更加方便：我们可以将多个生命周期钩子或者computed属性等代码拆分成一个个函数，再将这些函数通过逻辑片段进行组合，以实现逻辑共享和复用。
功能逻辑更加清晰：Composition API的设计思想是将相关功能逻辑放到一起，以实现更好的可读性，同时也可以减少代码量。
组件之间通讯更加方便：Composition API中的provide/inject方式，可以让我们更加方便地进行组件之间的通信，而不需要通过父组件或者全局事件总线等方式进行。

例：假设我们有两个组件，组件A和组件B，现在需要在这两个组件中都使用到某个功能函数。如果使用Options API，则需要在两个组件中都进行定义和引用这个函数。而使用Composition API，则只需要将该函数进行封装，然后在两个组件中都进行调用即可。

3. Vue3中的Teleport可以实现什么功能？如何使用？

Vue3中新增的Teleport功能可以实现在组件内部的DOM结构之外渲染内容的功能，例如弹出框、模态框等场景。使用Teleport需要在组件内部进行如下定义：

<template>
  <Teleport to="body">
    <div class="modal">
      <slot></slot>
    </div>
  </Teleport>
</template>

其中，to属性指定需要将内容渲染到哪个DOM容器中。在组件中使用时，可以直接使用组件名进行引用即可。

使用场景：如果需要在一个组件中弹出一个模态框，我们可以使用Teleport将模态框的DOM结构渲染到body标签中，以实现弹出层在整个页面中的层级显示效果。（全局弹窗组件）

4. Vue3中如何使用Teleport实现弹出层的显示和隐藏效果？

Vue3中使用Teleport可以方便地实现弹出层的显示和隐藏效果。具体做法如下：

在模板中使用Teleport将弹出层的DOM结构渲染到body标签中。
在组件中定义一个显示状态的变量，根据该变量的值控制弹出层的显示和隐藏。

以下代码展示了如何使用Teleport和Vue3的响应式特性实现弹出层的显示和隐藏效果：

<template>
  <Teleport to="body" v-if="visible">
    <div class="popup">
      <div class="popup-content">
        <slot></slot>
      </div>
    </div>
  </Teleport>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  }
})
</script>

5. Vue3中使用Suspense和lazy实现异步组件加载，有哪些使用限制？

Vue3中使用Suspense和lazy实现异步组件加载，主要有以下限制：

Suspense只能包裹一个异步组件，不能包裹多个异步组件。
懒加载组件必须被定义为函数形式。
懒加载组件必须返回一个Promise对象，以表示组件的异步加载结果。

例：以下代码展示了如何使用Suspense和lazy进行异步组件加载：

<template>
  <div>
    <Suspense>
      <template #default>
        <lazy-component />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const LazyComponent = defineAsyncComponent(() =>
  import('./LazyComponent.vue')
)

export default {
  components: {
    LazyComponent
  }
}
</script>

Vue3中的v-model指令如何进行双向绑定？

Vue3中的v-model指令与Vue2中有所不同，它通过setup()函数中的props和emit进行双向绑定。具体做法如下：

在组件中通过props定义一个value属性，并通过emit事件返回该属性的值。
在模板中使用v-model指令进行双向绑定。

<template>
  <div>
    <input v-model="text" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const text = ref(props.modelValue)

    const handleChange = (e) => {
      text.value = e.target.value
      emit('update:modelValue', e.target.value)
    }

    return {
      text,
      handleChange
    }
  }
})
</script>

7. Vue3中如何使用provide/inject进行组件通信？和vue2有什么区别？

Vue3中使用provide/inject进行组件通信与Vue2基本相同，但有以下几个区别：

使用方式不同：Vue3中的provide和inject都是通过setup函数进行使用的，而不是像Vue2中放在组件选项中。
类型声明：在Vue2中，provide和inject都是弱类型的，没有类型声明，而在Vue3中，它们都支持类型声明，可以在传递和接收数据时进行类型检查，提高代码稳定性。
作用域：Vue3中的provide和inject的作用域只在当前组件及其后代组件中，而在Vue2中，provide和inject的作用域可以跨级。
响应式变化：在Vue2中，如果provide提供的数据发生变化，inject并不会立即感知到。而在Vue3中，provide/inject的数据类型已经改变为了Reactive<T>，provide和inject都支持响应式变化，并且通过改变provide提供的数据，能够触发后代组件中对应的inject数据重新渲染。
Vue3中提供了一个新的函数markRaw，可以将一个不需要响应式的普通数据类型标记为不响应式，避免在provide/inject过程中出现不必要的响应式更新。
当使用provide提供数据时，需要使用readonly将其进行只读处理，避免在inject中对其进行修改。

以下是一个使用provide/inject进行组件通信的示例：

// 父组件
import { provide } from 'vue'

export default {
  setup() {
    const userInfo = {
      name: 'John',
      age: 18
    }
    provide('userInfo', userInfo)
  }
}

// 子组件
import { inject, reactive } from 'vue'

export default {
  setup() {
    const userInfo = inject('userInfo', reactive({}))
    return {
      userInfo
    }
  }
}