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

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

Vue 3中的事件处理有什么不同？

在 Vue 3 中，事件处理的工作方式与 Vue 2 相似，但有一些小的差异。

以下是 Vue 3 中事件处理的一些不同之处：

1. 方法绑定：在 Vue 3 中，方法绑定仍然使用 v-on 指令，但语法略有不同。在 Vue 2 中，你可以使用 v-on:click="method" 或 @click="method" 来绑定点击事件。在 Vue 3 中，你可以使用 v-on:click="handleClick" 或 @click="handleClick" 来绑定点击事件。
2. 事件对象：在 Vue 3 中，事件对象的格式略有不同。在 Vue 2 中，事件对象包含在第二个参数中，例如 handleClick(event)。在 Vue 3 中，事件对象作为第一个参数传递，例如 handleClick(event)。
3. 阻止默认行为：在 Vue 3 中，阻止默认行为的方式与 Vue 2 相同。你可以使用 event.preventDefault() 来阻止默认行为。
4. 事件修饰符：在 Vue 3 中，事件修饰符的语法与 Vue 2 相同。你可以使用 v-on:click.stop="handleClick" 或 @click.stop="handleClick" 来阻止点击事件的默认行为。

总的来说，Vue 3 中的事件处理与 Vue 2 相似，但在语法和事件对象的传递方式上略有不同。这些差异通常是小的，并且很容易适应。

Vue 3中如何处理异步操作？

在 Vue 3 中，处理异步操作的方式与 Vue 2 相似，但是有一些小的差异。

以下是在 Vue 3 中处理异步操作的一般步骤：

1. 使用 async 关键字定义异步方法：

async handleAsyncOperation() {
  // 在这里执行异步操作
  const result = await fetch('https://example.com/api');
  const data = await result.json();

  // 更新组件状态
  this.$data.result = data;
}

2. 在模板中使用异步方法：

<template>
  <div>
    <button @click="handleAsyncOperation">异步操作</button>
    <p>{{ result }}</p>
  </div>
</template>

在上面的代码中，handleAsyncOperation 方法使用 fetch() 函数执行异步操作，并在成功获取数据后更新组件状态。在模板中，点击按钮会触发 handleAsyncOperation 方法，并在成功获取数据后显示结果。

请注意，在 Vue 3 中，你还可以使用 Promise 或 async/await 语法来处理异步操作。这取决于你的具体需求和代码风格。

Vue 3的编译器和运行时有什么区别？

在 Vue 3 中，编译器和运行时是两个不同的概念，它们在 Vue 应用的构建和运行过程中扮演不同的角色。

1. 编译器：Vue 3 的编译器负责将模板转换为 JavaScript 代码。

它解析模板中的 HTML 结构和 Vue 特定的语法，并生成相应的渲染函数。编译器的主要任务是将模板转换为可执行的代码，以便在运行时能够正确渲染组件。

2. 运行时：Vue 3 的运行时负责在浏览器中运行 Vue 应用。

它包含了 Vue 应用的核心逻辑，包括组件的注册、渲染、状态管理等。

运行时负责解释和执行编译器生成的渲染函数，并与浏览器的 DOM 进行交互，以实现组件的渲染和更新。

编译器和运行时是 Vue 3 应用构建和运行的两个关键部分。编译器将模板转换为可执行的代码，而运行时负责在浏览器中解释和执行这些代码，以实现 Vue 应用的功能。这两个部分协同工作，确保 Vue 应用能够正确地渲染和更新。

Vue 3中的Teleport和Portal有什么不同？

在 Vue 3 中，Teleport 和 Portal 都是用于在不同的组件或元素之间进行内容传递和渲染的技术，但它们的工作方式略有不同。

1. Portal：Portal 是 Vue 2 中引入的一个概念，用于在不同的组件或元素之间共享内容。

【内容共享】通过使用 Portal，你可以将一个组件的内容渲染到另一个组件或元素中。

【灵活性、可重用性、独立渲染】Portal 的工作方式类似于在目标组件或元素上创建一个“洞口”，并将源组件的内容“传送”到目标组件或元素中进行渲染。

2. Teleport：Teleport 是 Vue 3 中引入的一个新概念，它提供了一种更灵活和可配置的方式来在不同的组件或元素之间共享内容。

【内容共享、灵活性、可重用性、独立渲染、目标位置和行为的控制】与 Portal 不同，Teleport 允许你在源组件和目标组件之间建立直接的连接，而不需要在目标组件或元素上创建一个“洞口”。

通过使用 Teleport，你可以指定要传送的内容、目标位置以及传送的行为。

以下是在 Vue 3 中使用 Teleport 和 Portal 的具体示例：

1. Portal 的使用方法：

<template>
  <div>
    <button @click="showModal">显示模态框</button>
    <Portal to="modal">
      <h2>这是通过 Portal 传递的内容</h2>
    </Portal>
  </div>
  <div id="modal" v-if="showModal">
    <h2>这是模态框的内容</h2>
    <button @click="hideModal">关闭模态框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    showModal() {
      this.showModal = true;
    },
    hideModal() {
      this.showModal = false;
    }
  }
};
</script>

在上面的示例中，我们使用 Portal 元素将一个包含标题的部分内容传送到一个名为 modal 的目标元素中。当点击 “显示模态框” 按钮时，会将 showModal 属性设置为 true，从而显示模态框。在模态框中，我们可以看到通过 Portal 传递的内容。

2. Teleport 的使用方法：

<template>
  <div>
    <button @click="showModal">显示模态框</button>
    <Teleport to="modal">
      <h2>这是通过 Teleport 传递的内容</h2>
    </Teleport>
  </div>
  <div id="modal" v-if="showModal">
    <h2>这是模态框的内容</h2>
    <button @click="hideModal">关闭模态框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    showModal() {
      this.showModal = true;
    },
    hideModal() {
      this.showModal = false;
    }
  }
};
</script>

在上面的示例中，我们使用 Teleport 元素将一个包含标题的部分内容传送到一个名为 modal 的目标元素中。当点击 “显示模态框” 按钮时，会将 showModal 属性设置为 true，从而显示模态框。在模态框中，我们可以看到通过 Teleport 传递的内容。

请注意，在使用 Portal 或 Teleport 时，目标元素需要在模板中存在，并且可以根据需要进行显示或隐藏。在示例中，我们使用了 v-if 指令来控制目标元素的显示。

这只是使用 Portal 和 Teleport 的基本示例。根据具体的需求和场景，你可以根据需要进行更复杂的配置和使用。

总的来说，Portal 和 Teleport 都是用于在不同的组件或元素之间共享内容的技术，但它们的工作方式略有不同。Portal 更像是在目标组件或元素上创建一个“洞口”，并将源组件的内容“传送”到目标组件或元素中进行渲染。而 Teleport 则提供了更灵活和可配置的方式来在不同的组件或元素之间共享内容，允许你指定要传送的内容、目标位置以及传送的行为。根据具体的需求和场景，你可以选择使用适合的技术来实现内容共享和渲染。