Vue3 面试题 | 03.精选 Vue3 面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

9. Vue 3中的动态组件是什么？如何使用它们？

在 Vue 3 中，动态组件是一种根据运行时条件动态选择和渲染组件的技术。通过使用动态组件，我们可以根据数据或其他条件在不同的组件之间进行切换。

要使用动态组件，我们可以使用 v-bind:is 指令将组件的名称绑定到一个动态值上。例如：

<component :is="currentComponentName" />

在上面的代码中，currentComponentName 是一个变量，它的值将决定要渲染的组件的名称。我们可以在组件的 data() 方法或其他地方定义这个变量，并根据需要更新它的值。

当 currentComponentName 的值发生变化时，Vue 会自动重新渲染组件，显示新的组件内容。

以下是一个示例，展示如何在 Vue 3 中使用动态组件：

<template>
  <div>
    <button @click="switchComponent">切换组件</button>
    <component :is="currentComponentName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponentName: 'ComponentA'
    };
  },
  methods: {
    switchComponent() {
      this.currentComponentName = this.currentComponentName === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

<style scoped>
ComponentA {
  color: red;
}

ComponentB {
  color: blue;
}
</style>

在这个示例中，我们定义了两个组件 ComponentA 和 ComponentB，并在 data() 方法中定义了一个变量 currentComponentName，它的值初始化为 ComponentA。

当用户点击按钮时，我们使用 switchComponent() 方法更新 currentComponentName 的值，从而切换显示的组件。在样式部分，我们为每个组件定义了不同的颜色，以便在切换组件时看到视觉效果的变化。

通过使用动态组件，我们可以根据需要在运行时动态地选择和渲染不同的组件，提高了代码的灵活性和可复用性。

10. 什么是Vue 3中的Fragment？为什么它很有用？

在 Vue 3 中，Fragment 是一种用于在模板中创建多个根元素的技术。它允许你在一个模板中创建多个根元素，而不需要使用多个 template 元素或嵌套的 div 元素。

Fragment 很有用的原因有以下几点：

1. 提高模板的可读性和可维护性：使用 Fragment 可以避免在模板中使用过多的嵌套元素，从而使模板更加简洁和易于理解。这有助于提高模板的可读性和可维护性。
2. 更好地控制组件的渲染：使用 Fragment 可以更好地控制组件的渲染。你可以将多个根元素放在一个 Fragment 中，并在需要时动态地渲染它们。这使得在不同的情况下选择渲染不同的根元素变得更加容易。
3. 提高性能：使用 Fragment 可以减少模板的渲染次数，从而提高性能。因为当你使用 Fragment 时，Vue 只会渲染 Fragment 中的根元素，而不会渲染整个模板。

以下是一个示例，展示如何在 Vue 3 中使用 Fragment：

<template>
  <Fragment>
    <h1>标题 1</h1>
    <p>段落 1</p>
    <h2>标题 2</h2>
    <p>段落 2</p>
  </Fragment>
</template>

在上面的代码中，我们使用 <Fragment> 元素创建了一个包含多个根元素的片段。这些根元素将在组件的渲染过程中被视为独立的元素，并按照它们在模板中的顺序进行渲染。

总的来说，Fragment 是一种在 Vue 3 中用于创建多个根元素的有用技术。它可以提高模板的可读性和可维护性，更好地控制组件的渲染，并在一定程度上提高性能。

11. Vue 3中的Suspense是什么？它有什么作用？

在 Vue 3 中，Suspense 是一个新的组件，用于在组件渲染过程中暂停并等待异步数据加载完成。它提供了一种在组件渲染过程中处理异步数据加载的方法，避免了在加载数据时出现闪烁或空白屏幕的情况。

Suspense 组件可以与 asyncComponent 或 async setup 一起使用，以在加载异步组件或数据时暂停渲染。当异步数据加载完成后，Suspense 组件将恢复渲染，并显示加载完成的内容。

以下是一个示例，展示如何在 Vue 3 中使用 Suspense 组件：

<template>
  <Suspense>
    <AsyncComponent :loading="isLoading" />
  </Suspense>
</template>

<script>
import AsyncComponent from './AsyncComponent.vue';

export default {
  components: {
    AsyncComponent
  },
  data() {
    return {
      isLoading: true
    };
  },
  async mounted() {
    const data = await fetch('https://api.example.com/data');
    this.isLoading = false;
    this.$emit('dataLoaded', data);
  }
};
</script>

<style scoped>
AsyncComponent {
  color: red;
}
</style>

在上面的代码中，我们使用 Suspense 组件来加载 AsyncComponent。在 mounted 生命周期钩子中，我们使用 fetch() 函数加载异步数据，并在数据加载完成后更新 isLoading 属性为 false，并触发一个事件 dataLoaded，将加载完成的数据传递给 AsyncComponent。

通过使用 Suspense 组件，我们可以在组件渲染过程中暂停并等待异步数据加载完成，避免了在加载数据时出现闪烁或空白屏幕的情况。这使得在处理异步数据加载时更加优雅和直观。

12. Vue 3中的自定义指令和过滤器如何使用？

在 Vue 3 中，自定义指令和过滤器是用于扩展 Vue 框架功能的重要工具。它们允许你在模板中定义自己的特殊行为或对数据进行转换。

以下是使用自定义指令和过滤器的一般步骤：

1. 定义指令或过滤器函数：

• 对于自定义指令，定义一个函数并传入指令的名称和参数。函数将在元素的生命周期钩子中被调用。
• 对于过滤器，定义一个函数并传入要过滤的数据。

2. 在 Vue 组件中注册指令或过滤器：

• 对于自定义指令，可以在组件的 directives 选项中注册。
• 对于过滤器，可以在组件的 filters 选项中注册。

3. 在模板中使用指令或过滤器：

• 对于自定义指令，在元素上使用指令名称作为属性，并传递所需的参数。
• 对于过滤器，在模板表达式中使用过滤器名称，并将要过滤的数据作为参数传递。

以下是一个示例，展示如何定义和使用自定义指令：

// 定义自定义指令函数
function myDirective directiveFunction() {
  // 在这里编写指令的具体逻辑
}

// 在组件中注册自定义指令
export default {
  directives: {
    myDirective: myDirective
  }
}

// 在模板中使用自定义指令
<template>
  <div v-myDirective="someParameter">自定义指令的内容</div>
</template>

以下是一个示例，展示如何定义和使用自定义过滤器：

// 定义自定义过滤器函数
function myFilter filterFunction(value) {
  // 在这里编写过滤器的具体逻辑
  return filteredValue;
}

// 在组件中注册自定义过滤器
export default {
  filters: {
    myFilter: myFilter
  }
}

// 在模板中使用自定义过滤器
<template>
  {{ someValue | myFilter }}
</template>

通过使用自定义指令和过滤器，你可以根据自己的需求扩展 Vue 框架的功能，并在模板中实现更灵活和定制化的行为。