前端面试题：14道精选Vue面试题及答案

1、什么是Vue.js？Vue.js有什么优势？

Vue是一个用于构建用户界面的渐进框架，核心库只关注视图层，并且很容易与其他库或现有项目进行挑选和集成，下面是使用Vue.js的优点。

• 体积小-该框架的大小为18到21KB，用户无需花时间下载和使用它。
• 易于理解—该框架流行的原因之一是它很容易理解，由于其结构简单，用户可以轻松地将Vue.js添加到其Web项目中。
• 简单集成— Vue.js可以轻松地与现有应用程序集成。
• 灵活性-这种灵活性也使React.js，Angular.js和任何其他新的JavaScript框架的开发人员易于理解。
• 虚拟DOM —它使用类似于其他现有框架（例如ReactJS，Ember等）的虚拟DOM，虚拟DOM是原始HTML DOM的轻量级内存树表示形式，并且在不影响原始DOM的情况下进行了更新。
• 组件—用于在VueJS应用程序中创建可重用的自定义元素。
• 双向通信— Vue.js的MVVM体系结构也使双向处理通信变得非常容易，从而使其很容易处理HTML块。

2、Vue实例中的所有生命周期钩子是什么？

每个Vue实例在创建、挂载和销毁时都要经过一系列步骤，同时，它还将运行称为生命周期钩子的函数，使我们有机会在特定阶段添加自己的代码，下面是一个Vue实例生命周期的过程：

• beforeCreate——创建钩子中的第一个钩子。它们允许我们在将组件添加到DOM之前执行操作。我们无法访问其中的DOM。
• created——这个钩子可以用来在创建实例后运行代码，我们可以访问活性数据，但是模板和虚拟DOM还没有被加载或呈现。
• beforeMount—beforeMount钩子恰好在初始呈现发生之前以及模板或呈现函数编译之后运行，很可能我们永远都不需要使用这个钩子。
• mounted——我们可以完全访问响应性组件、模板和呈现的DOM，这是最常用的钩子。
• beforeUpdate—此钩子在组件上的数据更改和更新周期开始后运行，是在修补和重新呈现DOM之前运行。
• updated-这个钩子在我们的组件上的数据改变和DOM重新渲染后运行。如果我们需要在属性更改后访问DOM，这里可能是最安全的地方。
• beforeDestroy—这个钩子将在销毁实例之前运行，果我们需要清理事件或被动订阅，这里就是合适的地方。
• destroyed-这个钩子将被用来做任何最后一分钟的清理。

3、v-show和v-if指令之间的区别是什么？

以下是v-show和v-if指令之间的一些主要区别：

• 如果表达式通过，则v-if将元素呈现给DOM，而v-show将所有元素呈现给DOM，然后使用CSS display属性根据表达式显示/隐藏元素。
• v-if支持v-else和v-else-if指令，而v-show不支持else指令。
• v-if有更高的切换成本，因为它每次添加或删除DOM，而v-show有更高的初始渲染成本，也就是说，v-show具有性能优势，如果元素经常被打开和关闭，而v-if在初始渲染时间方面具有优势。
• v-if支持tab，但v-show不支持。

4、Vue.js中的key是什么？

为了更有效地呈现DOM元素，Vue.js重用了这些元素，而不是每次都从头开始创建它们，这种默认模式是有效的，但在某些情况下可能会导致问题。例如，如果你试图在v-if和v-else块中呈现相同的输入元素，那么它将保存以下先前的值：

5、为什么不应该在同一元素上同时使用if和for指令？

建议不要在与v-for相同的元素上使用v-if，因为v-for指令比v-if具有更高的优先级，以下是两种常见的情况：

• 过滤列表中的项目(例如，v-for=”user in users” v-if=”user. isactive “)。在这些情况下，用一个新的计算属性替换用户，该属性返回过滤后的列表(例如activeUsers)。
• 避免渲染一个列表，如果它应该被隐藏(例如，v-for=”user in users” v-if=”shouldShowUsers”)，在这些情况下，将v-if移动到容器元素(例如ul、ol)。

6、复合属性和方法之间有什么区别？

计算属性是Vue实例中的getter函数，而不是实际的方法，我们可以将相同的函数定义为方法。但是，不同之处在于，计算的属性是基于它们的依赖项缓存的。计算得到的属性只有在其某些依赖项发生更改时才会重新计算，相比之下，每当重新呈现时，方法调用将始终运行该函数。

当我们必须通过做大量的计算来计算一些东西时，比如遍历一个大数组，最好使用computed properties而不是一个方法，如果没有缓存，我们将花费不必要的时间，当我们不需要缓存时，我们可以使用一个方法来代替。

7、Vue中的$parent是什么？

与$root类似，$parent属性可用于从子实例访问父实例。尽管它提供了直接访问，但是它使应用程序难于测试和调试，我们很难找到突变的来源。

与$parent一样，Vue也提供了$child，但是可以使用它来访问子实例。

8、ref在Vue.js中扮演什么角色？

尽管存在一些props和event，有时如果我们仍然需要直接访问子组件，我们可以使用ref属性为子组件分配一个引用ID。

例如：

现在在我们定义了这个ref的组件中，我们可以使用：

$refs只在组件被呈现之后才会被填充，并且它们不会被激活。

因此，我们应该避免从模板或计算属性中访问$refs。

9、我们为什么需要本地注册？

全局注册通常并不理想，例如，如果我们使用一个像Webpack这样的构建系统，全局注册所有组件意味着即使我们停止使用一个组件，它仍然可以包含在我们的最终构建中。这不必要地增加了用户必须下载的JavaScript的数量，在这些情况下，你可以将你的组件定义为普通的JavaScript对象：

然后在组件选项中定义你想要使用的组件：

10、混合mixin是什么？

mixin是一种为Vue组件分发可重用功能的灵活方法，mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将“混合”到组件自己的选项中，例子：

11、Vue.js轨道track如何变化？

当你将一个普通的JavaScript对象作为其数据选项传递给Vue实例时，Vue将遍历其所有属性，并使用object . defineproperty将它们转换为getter/setter。

getter/setter对用户来说是不可见的，但是在底层，它们使Vue能够在访问或修改属性时执行依赖跟踪和更改通知。

每个组件实例都有一个相应的watcher实例，它记录了在组件作为依赖项呈现期间“接触”的所有属性。稍后，当一个依赖项的setter被触发时，它会通知观察者，这又会导致组件重新呈现。

12、什么是异步组件？

在大型应用程序中，我们可能需要将应用程序分成更小的块，并且只在需要时从服务器加载组件。为了简化这一点，Vue允许你将我们的组件定义为一个工厂函数，该函数异步解析你的组件定义。Vue只会在需要呈现组件时触发工厂函数，并缓存结果以备将来重新呈现。

例如：

正如我们所看到的，factory函数接收一个resolve回调，当我们从服务器检索组件定义时应该调用这个回调，我们也可以调用拒绝(原因)来指示负载失败。

13、Vue.js中的过滤器是什么？

js允许我们定义过滤器，可以用来应用常见的文本格式，过滤器可用在两个地方：胡子插值和v-bind表达式。过滤器应该被附加到JavaScript表达式的末尾，用“管道”符号表示：

14、什么是Vue路由器？

Vue路由器是Vue.js的官方路由器，它与Vue.js核心深度集成，使得用Vue.js构建单页面应用程序容易实现，它的功能包括：

• 嵌套路线/视图映射
• 模块化，基于组件的路由器配置
• 路由参数，查询，通配符
• 查看由js的转换系统提供的Vue转换效果
• 细粒度的导航控制
• 链接自动活动的CSS类
• 可定制的滚动行为
• HTML5历史模式或散列模式，在IE9中具有自动回退功能