最新24道vue2+vue3面试题带答案汇总

MVVM与MVC的区别

• MVVM
  • 数据双向绑定，当数据变化时，视图自动更新；当视图变化时，数据也自动更新。
  • 视图和模型不能直接通信，通过ViewModel来通信。
  • M (Model): 数据模型，与应用程序的业务逻辑相关的数据的封装载体。
  • V (View): 视图，负责用户界面的展示和呈现。
  • VM (ViewModel): 视图模型，是View和Model的粘合体，负责View和Model的交互和协作。
  • 特点：
• MVC
  • 视图和模型通过控制器来通信。
  • 主要是单向通信，即View和Model之间的交互需要通过Controller。
  • M (Model): 数据模型，表示应用程序核心（如数据库）。
  • V (View): 视图，显示数据的页面，一般为HTML。
  • C (Controller): 控制器，控制整个业务逻辑，负责处理数据，如数据的获取和过滤。
  • 特点：

Vue 2与Vue 3的主要区别

• 响应式系统
  • Vue 2: 使用Object.defineProperty()进行数据劫持。
  • Vue 3: 使用Proxy进行响应式处理，提供了更全面的数据监听和更好的性能。
• API设计
  • Vue 2: 使用Options API，将同等属性的数据定义在一起。
  • Vue 3: 引入了Composition API，允许你根据功能模块将同一逻辑的变量和方法放在一起。
• 性能提升
  • Vue 3在性能上有所提升，尤其是响应式系统和虚拟DOM的改进。
• 新增特性
  • Vue 3新增了Fragment、Teleport和Suspense等特性。
• TypeScript支持
  • Vue 3对TypeScript的支持更加完善。
• 生命周期函数和API变化
  • Vue 3中一些生命周期函数的名字和用法有所变化，如beforeCreate和created被setup替代。
  • 引入了一些新的API，如ref、reactive、watchEffect等。

Vue 3的优势

• 更好的性能：通过Proxy和优化的虚拟DOM算法，Vue 3提供了更快的渲染速度和更好的运行时效率。
• 更灵活的代码组织：Composition API允许更灵活地组织代码，提高代码的可读性和可维护性。
• 更完善的TypeScript支持：Vue 3为TypeScript提供了更好的支持，使得在Vue 3中使用TypeScript编写代码更加容易和可靠。
• 更多的新特性：如Fragment、Teleport和Suspense等特性为开发者提供了更多的选择和可能性。

Vue 2 是如何实现数据绑定的？

答案：Vue 2 使用 Object.defineProperty() 来实现数据劫持，通过 getter 和 setter 来追踪数据的变化，并实现数据的双向绑定。

Vue 2 中的 v-model 是如何工作的？

答案：v-model 在 Vue 2 中是一个语法糖，它背后实际上是绑定了输入元素的 value 属性和 input 事件。当用户更改输入值时，会触发 input 事件，从而更新数据模型。

Vue 2 的生命周期钩子有哪些？

答案：Vue 2 的主要生命周期钩子包括 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, 和 destroyed。

Vue 3 使用了什么技术来实现响应式系统？

答案：Vue 3 使用了 Proxy 对象来实现响应式系统，它提供了更全面的数据监听，包括数组和对象的新增、删除属性等，都能被监听到。

Vue 3 中的 Composition API 带来了哪些好处？

答案：Composition API 允许开发者更加灵活地组织和复用代码逻辑，特别是对于复杂组件或大型项目来说，它使得代码更加清晰和可维护。

Vue 3 对 TypeScript 的支持如何？

答案：Vue 3 提供了更好的 TypeScript 支持，包括更严格的类型检查和更准确的类型定义，这有助于提高代码的安全性和可维护性。

Vue 3 中有哪些新的特性或功能？

答案：Vue 3 引入了多个新特性，包括 Fragment（允许组件有多个根节点）、Teleport（用于将组件内容渲染到 DOM 中的任意位置）、Suspense（用于处理异步组件加载时的等待状态）等。

Vue 3 在性能方面有哪些改进？

答案：Vue 3 通过优化内部实现，如使用 Proxy 替代 Object.defineProperty、重写 diff 算法等，提升了渲染速度和性能，减少了内存占用。

如何在 Vue 3 中实现全局状态管理？

答案：Vue 3 中仍然可以使用 Vuex 进行全局状态管理，但 Vue 3 也提供了新的 Composition API，使得状态管理更加灵活和模块化。此外，还可以使用新的 provide 和 inject API 在组件树中传递状态。

Vue 3 的生命周期钩子与 Vue 2 有何不同？

答案：Vue 3 中的生命周期钩子与 Vue 2 类似，但有一些变化。例如，beforeCreate 和 created 钩子在 Vue 3 中被 setup() 函数替代，该函数在组件创建之前执行。其他钩子如 beforeMount, mounted, beforeUpdate, updated, beforeUnmount, 和 unmounted 仍然保留，但名称有所变化（如 beforeDestroy 变为 beforeUnmount，destroyed 变为 unmounted）。

请解释Vue的组件化开发。

Vue的组件化开发是一种将UI拆分成多个独立、可复用的部分（即组件）的开发方式。每个组件都包含自己的HTML模板、JavaScript逻辑和CSS样式。通过组件化，我们可以构建大型应用，同时保持代码的可读性和可维护性。

Vue组件之间如何通信？

Vue组件之间通信有多种方式，包括：

• props向下传值
• 自定义事件（$emit）向上传值
• Vuex状态管理
• provide和inject跨层级传值
• refs父子组件直接访问
• 和children访问父/子组件实例
• 和listeners父子组件间属性监听和事件监听等。

请解释Vue的指令及其用法。

Vue指令是Vue模板中特殊的标记，用于在元素的DOM上应用一些特殊的行为。常见的指令有：

• v-if（条件渲染）
• v-for（列表渲染）
• v-bind（绑定属性）
• v-on（绑定事件监听器）
• v-model（双向数据绑定）

这些指令都以v-为前缀，后跟指令名称。

什么是Vue的路由，Vue Router是如何工作的？

Vue Router是Vue.js的官方路由管理器。它和Vue.js深度集成，使得构建单页面应用变得易如反掌。Vue Router通过映射URL到组件，使得用户可以导航到不同的视图，而不需要重新加载页面。它监听浏览器的地址变化，并根据路由配置加载对应的组件。

Vue如何实现页面间的数据传递？

Vue实现页面间数据传递有多种方式，如：

• 使用Vue Router的params和query参数
• Vuex状态管理
• 事件总线（Event Bus）
• provide和inject
• localStorage/sessionStorage 等。

具体使用哪种方式取决于应用的具体需求。

请解释Vue的计算属性（computed）和侦听器（watch）。

Vue的计算属性是基于它们的响应式依赖进行缓存的。只有在它的相关响应式依赖发生改变时才会重新求值。这使得计算属性非常适合在模板中进行复杂逻辑的计算。而Vue的侦听器则允许你观察和响应Vue实例上的数据变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Vue的过滤器（filters）是如何工作的？

Vue的过滤器用于文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。过滤器函数总是接收表达式的值（之前的值）作为第一个参数。过滤器可以串联，即一个过滤器的输出被用作下一个过滤器的输入。

Vue的虚拟DOM是什么，它如何提升性能？

Vue的虚拟DOM是一个编程概念，在这个概念里，DOM被抽象成了一棵以JavaScript对象（VNode节点）作为基础的树，用对象属性来描述节点。当数据发生变化时，Vue会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行差异比较，从而计算出最小的变更集并应用到实际的DOM上，以此提升性能。

Vue的mixin是什么，如何使用？

Vue的mixin是一种分发Vue组件的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。混入也可以进行全局注册。使用时，只需要在组件的选项中通过mixins选项声明即可。

Vue的nextTick是什么，为什么需要它？

Vue的nextTick是一个函数，它延迟一个回调，在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用它，然后等待DOM更新。它对于在数据变化后要执行的依赖于DOM的操作非常有用。因为Vue的DOM更新是异步的，所以当我们修改数据后，视图并不会立即更新，而是会等待同一事件循环中的所有数据变化完成之后，再统一进行视图更新。如果我们需要在数据变化后立即获取更新后的DOM，就需要使用nextTick。

Vue2和Vue3的区别巨详细版

1. 响应式系统

Vue 2 使用 Object.defineProperty 来进行数据劫持，它只能对对象的属性进行劫持，对于新增的属性或者数组的下标变更则无法监听。

Vue 2 示例：

// Vue 2 响应式数据  
data() {  
  return {  
    message: 'Hello Vue 2!'  
  };  
}

Vue 3 使用 Proxy 来实现响应式系统，它可以对对象进行更深层次的监听，包括新增属性和数组变更。

Vue 3 示例：

// Vue 3 响应式数据  
import { ref } from 'vue';  
  
setup() {  
  const message = ref('Hello Vue 3!');  
  
  // 可以通过message.value进行访问和修改  
  return {  
    message  
  };  
}

2. 组合式 API (Composition API)

Vue 3 引入了 Composition API，允许我们更加灵活地组织组件逻辑。

Vue 2 示例 (Options API):

export default {  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};

Vue 3 示例 (Composition API):

import { ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
    const increment = () => {  
      count.value++;  
    };  
  
    return {  
      count,  
      increment  
    };  
  }  
};

3. Fragment (碎片)

Vue 3 支持组件有多个根节点。

Vue 2 示例 (需要根节点):

<template>  
  <div>  
    <header>...</header>  
    <main>...</main>  
    <footer>...</footer>  
  </div>  
</template>

Vue 3 示例 (可以没有根节点):

<template>  
  <header>...</header>  
  <main>...</main>  
  <footer>...</footer>  
</template>

4. Teleport (传送门)

Vue 3 允许我们将模板的一部分“传送”到 DOM 树中的任何位置。

Vue 3 Teleport 示例:

<template>  
  <teleport to="body">  
    <div id="modal">...</div>  
  </teleport>  
</template>

在这个例子中，<div id="modal"> 将被渲染到 <body> 的子节点中，而不是它原来的组件模板位置。

5. 性能改进

Vue 3 在很多方面进行了性能优化，比如编译优化、更快的组件初始化、更快的更新渲染等。由于这些优化是内部的，所以不会直接体现在代码上。

6. 移除或改变的功能

• on, off,
• filter 过滤器已被移除。
• v-model 在自定义组件上的行为有所改变，现在它默认使用 modelValue 作为 prop 和 update:modelValue 作为事件。
• 异步组件的 API 有所改变。

7. 构建工具

Vue 3 官方推荐使用 Vite 作为构建工具，它比 Vue 2 中常用的 Webpack 构建速度更快。但你也可以在 Vue 3 中继续使用 Webpack。

8. TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，使得在 Vue 3 中使用 TypeScript 编写代码更加容易和可靠。

您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。