个性化阅读
专注于IT技术分析

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

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块中呈现相同的输入元素,那么它将保存以下先前的值:

vue中的key解析代码

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。

例如:

vue的ref的使用

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

vue中ref的使用

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

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

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

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

将组件定义为JS对象

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

vue定义需要使用的组件

10、混合mixin是什么?

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

vue定义和使用混合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表达式的末尾,用“管道”符号表示:

vue过滤器定义和使用

14、什么是Vue路由器?

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

  • 嵌套路线/视图映射
  • 模块化,基于组件的路由器配置
  • 路由参数,查询,通配符
  • 查看由js的转换系统提供的Vue转换效果
  • 细粒度的导航控制
  • 链接自动活动的CSS类
  • 可定制的滚动行为
  • HTML5历史模式或散列模式,在IE9中具有自动回退功能
赞(0) 打赏
未经允许不得转载:srcmini » 前端面试题:14道精选Vue面试题及答案
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏