【面试宝典】88道Vue高频题库整理(附答案背诵版)

最新推荐文章于 2025-06-05 14:15:46 发布

想念@思恋

最新推荐文章于 2025-06-05 14:15:46 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：面试宝典前端文章标签： vue.js 面试前端

本文链接：https://blog.youkuaiyun.com/tailonh/article/details/141201805

Vue的插件（Plugin）和组件（Component）是Vue.js中非常重要的两个概念，它们在功能上有着明显的差异。

Vue组件（Component）： Vue组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较大的Vue.js应用中，我们会把整个应用拆分成一些小的、独立的、可复用的组件以使整个项目结构更清晰。例如，一个电商网站的页面可以被拆分为头部组件，侧边栏组件，产品列表组件等。
Vue插件（Plugin）： Vue插件通常用来为Vue添加全局功能。插件的范围没有严格的限制——通常是添加全局方法或者通过全局混入等方式影响Vue构造器，也可以提供额外的命令行选项。它可能会为Vue添加全局方法或属性（如vue-custom-element），提供一些自定义选项，或者向Vue实例添加方法。例如，Vue Router和Vuex就是Vue的插件。

简单来说，Vue组件是Vue应用的一部分，用于封装和重用代码，而Vue插件则是用于添加全局级别的功能。

MVVM模式是Model-View-ViewModel的缩写，是一种设计思想。MVVM模式分为三部分：

Model（模型）：负责数据的存储以及处理问题的部分，它代表的是你的数据和业务逻辑。在Vue中，Model就是我们在data中声明的数据。
View（视图）：负责数据展示的部分，简单来说，就是用户看到并与之交互的界面。在Vue中，View就是我们写的模板。
ViewModel（视图模型）：它是连接View和Model的桥梁。在Vue中，ViewModel就是Vue实例。Vue实例在创建时，会接收data对象，并遍历此对象所有的属性，并使用Object.defineProperty将属性全部转为getter/setter，以便追踪属性的变化。当用户在View层进行操作时，ViewModel能感知到变化并对Model层的数据进行更新，反之亦然。

MVVM的最大优点就是数据驱动和双向数据绑定，即Model变化会自动更新到View，反之View变化也会自动改变Model。这种方式让开发者只需关注业务逻辑，不需要手动操作DOM，极大地提高了开发效率。

MVC 和 MVVM 都是常见的设计模式，它们的主要区别在于对视图和业务逻辑的处理方式。

MVC（Model-View-Controller）模式：
- Model（模型）：负责数据的存储。
- View（视图）：负责数据展示。
- Controller（控制器）：作为模型和视图之间的桥梁，处理用户交互，并更新视图和模型。
在MVC模式中，用户的操作会首先到达控制器，然后控制器更新模型，模型变化后会反过来更新视图。但是，这种模式的问题在于，控制器可能变得过于复杂，因为它需要处理视图和模型之间的所有交互。
MVVM（Model-View-ViewModel）模式：
- Model（模型）：负责数据的存储。
- View（视图）：负责数据展示。
- ViewModel（视图模型）：作为模型和视图之间的桥梁，处理用户交互，并更新视图和模型。
MVVM模式的出现是为了解决MVC中控制器过于复杂的问题。在MVVM中，视图模型替代了控制器的角色，它使用数据绑定的方式来实现视图和模型的同步。当模型的数据发生变化时，视图模型会自动更新视图，反之亦然。这种方式降低了视图和模型之间的耦合度，使得代码更易于管理和维护。

总的来说，MVVM相比MVC，更加注重数据驱动和视图的自动更新，使得开发者可以更专注于业务逻辑，而不需要手动操作DOM，提高了开发效率。

Vue组件间的通信主要有以下几种方式：

父子组件通信：
- Props down / Events up：父组件通过 props 向子组件传递数据，子组件通过 emit 发送事件来通知父组件数据的变更。
- 使用 $refs：父组件可以通过 $refs 获取子组件的实例，从而访问其数据和方法。
- .sync 修饰符：Vue 2.3.0 版本引入了 .sync 修饰符，可以作为一种双向绑定的语法糖，方便父子组件间的数据同步。
非父子组件通信：
- 事件总线（Event Bus）：创建一个新的 Vue 实例作为事件总线，在需要通信的组件之间触发和监听事件。
- Vuex：Vue 的官方状态管理工具，能够帮助我们管理共享状态，非常适合大型应用。
- Vue Router：如果使用了 Vue Router，可以通过路由参数进行通信。
跨级组件通信：
- $parent / $children：访问父/子组件实例。
- provide/inject：Vue 提供的依赖注入机制，能够实现祖先组件向后代组件注入数据或方法。

以上就是Vue中常见的组件间通信方式，选择哪种方式取决于具体的应用场景和需求。

Vue实例从创建到销毁的过程，就是生命周期。Vue的生命周期主要包括以下几个阶段：

创建阶段：
- beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
挂载阶段：
- beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用。
- mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。此时，你会有一些直接的 DOM 操作任务需要在这个阶段完成。
更新阶段：
- beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
- updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
销毁阶段：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

这些生命周期钩子函数为用户在不同阶段添加自己的代码提供了便利，比如你可以在 created 钩子函数中进行Ajax请求数据，在 mounted 钩子函数中操作DOM等。

v-if 和 v-show 都是 Vue 中用来进行条件渲染的指令，但它们之间有一些重要的区别：

v-if：是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。简单来说，如果条件为假，v-if 指令会完全销毁元素。
v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-show 只会在元素上切换 CSS 的 display 属性。如果条件为假，v-show 指令只会将元素隐藏，而不是销毁。

总的来说，v-if 有更高的切换消耗，v-show 有更高的初始渲染消耗。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。