本文会列举一些平时面试时问到的问题和答案,并说明面试官在当时问到这个问题时所期望对方的回答:

vue生命周期(钩子函数)

问题

请说一下vue的生命周期函数(钩子函数)。

问题描述

首先关于生命周期函数,一般我的第一个问题就是这个,我认为是每个使用vue的都要清楚的,如果这个问题答的问题很大其实我都不太想继续往下进行了。

即使英语不标准(我就是不标准的人,并不是说这是个问题)也要去把关键点说清楚,哪个地方有ed哪个地方没有ed其实是很关键的,或者可以手写下来,因为常用的就是created和mounted所以前4个可以清楚的手写出来并不难,后面4个不去详细说明都没事。(我自己工作中基本没用过后面4个)

在哪个周期能够首次拿到data数据和在哪个周期能够首次拿到mounted中的dom元素,如果没有说到这个问题,我一般会一直往下问,直到他说出来这两个答案。

期望答案

beforeCreate、created(此时需说明可以在created中首次拿到data中定义的数据)、beforeMount、mounted(此时需说明dom树渲染结束,可访问dom结构)、beforeUpdate、updated、beforeDestroy、destroyed

computed中的getter和setter

问题

说一下computed中的getter和setter。

问题描述

很多情况,我问到这个问题的时候对方的回答都是vue的getter和setter、订阅者模式之类的回答,我就会直接说问的并不是这个,而是computed,直接让对方说computed平时怎么使用。

很多时候得到的回答是computed的默认方式,只使用了其中的getter,就会继续追问如果想要再把这个值设置回去要怎么做,当然一般会让问到这个程度的这个问题他都答不上来了。

期望答案

watch监听对象

问题

如何watch监听一个对象内部的变化。

问题描述

这个问题我感觉是一个不应该不会的问题,可是我遇到的人大部分都没有给出我所期望的答案,有些人会说直接监听obj,好一点的会说直接点出来监听obj.key,但是很少有人回答deep,开始我还会去问immediate,但是太多人不知道了,所以后来我就只问监听对象了,只有回答出deep的才会去问immediate的作用。

期望答案

如果只是监听obj内的某一个属性变化,可以直接obj.key进行监听。

如果对整个obj深层监听

immediate的作用:当值第一次进行绑定的时候并不会触发watch监听,使用immediate则可以在最初绑定的时候执行。

v-for循环key的作用

问题

v-for循环时为什么要加key。

问题描述

问这个问题时,好多人再先回答的都是页面有警告,编辑器有提示,我会直接说不考虑报错和提示的问题,或者会问如果不加key的话,页面会不会出现什么异常情况。有的人会说是一个标识,标识他的唯一性,我会继续追问为什么要标识唯一性呢,不加又怎么样?

期望答案

vue的dom渲染是虚拟dom,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

举例说明:有一个列表我们现在在中间插入了一个元素,diff算法会默认复用之前的列表并在最后追加一个,如果列表存在选中一类的状态则会随着复用出现绑定错误的情况而不是跟着原元素,key的作用就可以给他一个标识,让状态跟着数据渲染。

$nextTick

问题

$nextTick用过吗,有什么作用。

问题描述

问到这个问题时,很多人都会说到可以处理异步,而往下追问为什么要用nextTick,他解决了什么问题,不用他会怎么样的时候就很多人说不上来了。

期望答案

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。(官网解释)

解决的问题:有些时候在改变数据后立即要对dom进行操作,此时获取到的dom仍是获取到的是数据刷新前的dom,无法满足需要,这个时候就用到了$nextTick。

$set

问题

vue中的$set用过吗,为什么要用它,解决了什么问题

问题描述

这个问题知道的人就基本都能说出来,但是不知道的就是一点不了解,有的还会说到es6的set结构

期望答案

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')(官方示例)

我自己的理解就是,在vue中对一个对象内部进行一些修改时,vue没有监听到变化无法触发视图的更新,此时来使用$set来触发更新,使视图更新为最新的数据。

组件间的传值

问题

说一下组件间的传值方式,你知道的所有方式都说一下

问题描述

这个问题其实就是想看官方文档有没有具体看过,因为很多传值方式官方文档上有描述,但是项目中用的相对较少。

基本都能回答上来,父传子:props;子传父:$emit;兄弟:eventbus;vuex;有一些会说到sessionStorage和localStorage、路由传参(这个答案其实并不是我想要问的,不过也可以实现一定的传值)

期望答案

1、ovide / inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

2、Vue.observable

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

3、$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

4、$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

5、props

6、$emit

7、eventbus

8、vuex

9、$parent / $children / ref

以上就是前端面试时面试官想要听到什么答案(关于一些Vue的问题)的详细内容

小编是一个有着5年工作经验的架构师,关于web前端,自己有做材料的整合,一个完整学习web前端的路线,学习材料和工具。需要的伙伴可以私信我,免费送给大家。对于学习web前端有任何问题(学习方法,学习效率,如何就业)都可以问我。希望你也能凭自己的努力,成为下一个优秀的程序员!

前端面试时面试官想要听到什么答案(关于一些Vue的问题)相关推荐

  1. 揭秘无领导小组面试时面试官的选人角度

    揭秘无领导小组面试时面试官的选人角度 其实不是像大家想象的那样,主要选择小组leader,很多时候leader反而会被淘汰,面试官主要选择满足以下特点的人(最好全部满足,满足的越多,分数越高): A. ...

  2. 【面试经验分享】大厂HR在面试时,都想听你说些啥?

    要回答这个问题,必须先了解大厂对于招人这件事的期待是什么.用人部门肯定希望能招到一个熟悉度高,专业技能强,快速上手,又能马上出活的人:HR希望能找到一个快速融入,能长久干下去并一直有产出而且成本又很低 ...

  3. 面试时,HR想坑我,没想到我社会经验这么足,竟然.....

    一提到面试,我想很多人都有聊不完的话题,刚好我最近在找工作,碰到了很多面试的坑,今天分享出来,以下只是本人微小的灼见,望大家海涵. 现在科技这么发达,好多人都在网上开始投简历,合适的线下约,以下面试常 ...

  4. 为什么面试时面试官要问你有没有车贷,房贷和负债?

    有负债,有贷款的普通人(注意是普通人哦)需要定期还上一定数额的款项. 问求职者相关情况,有以下意图: 一.求职的意愿是否强烈. 有负债,有贷款的普通人需要工作,有固定收入应付定期的还款责任.这样的人是 ...

  5. 2021:测试人员面试时都中过哪些套路?

    鲁迅说过,世上本没有路,只是走的人多了,也就成了路.然而路走的多了,套路好像也多了,你觉得是吗? 下面我们就来看看,测试人员面试过程中可能踩到哪些雷? 1.测试培训公司伪装招聘进行招生 利用招聘伪装起 ...

  6. 面试时,如何向HR解释自己频繁跳槽?

    有数据显示,现在的职场人,跳槽越来越频繁,95后平均7个月就离职. 对于面试官来说,一个跳槽过于频繁的人总是存在潜在风险,比如抗压力差.稳定性不好.心不定这山望着那山高.职业规划不清晰等等. 我一直强 ...

  7. 带答案APP测试面试题分享,助攻你的面试!面试官都惊呆了..

    基础篇 1.请介绍一下,APP测试流程? APP测试流程与web测试流程类似,分为如下七个阶段: 1.根据需求说明书编写测试计划: 2.制定测试方案,主要是测试任务.测试人员和测试时间的分配: 3.测 ...

  8. 面试时你暴露出这几个点,肯定没希望了!

    "面试过后焦急地等待结果,却从来没有等到过--"说的是你吗?如果你被"戳中",那可得好好看看求职者差评行为的榜单了,上榜的行为你中了哪条?正在找工作的你千万注意 ...

  9. 线上面试,面试官让我开视频,他自己却不开,一怒之下挂断视频!

    历来面试容易出奇葩,无论线上还是线下,有些面试官在线上面试的时候喜欢"单向视频",不开摄像头,却让对方开.自己在暗处,让求职者在明处,享受一种莫名其妙的优越感. 一位网友就遇到了这 ...

最新文章

  1. K-means算法(理论+opencv实现)
  2. 话里话外:简单看流程
  3. 深入Java核心 探秘Java垃圾回收机制
  4. api与implementation的区别
  5. GitLab 服务器的迁移以及注意点
  6. activex for chrome扩展程序 下载”_Chrome扩展程序一键生成网页骨架屏
  7. 机器学习笔记(3) 随机森林
  8. BZOJ 1013: [JSOI2008]球形空间产生器sphere( 高斯消元 )
  9. js detect the type of device
  10. jxls对比_jxls-2.x导出excel入门——基本操作
  11. 单/多文档的窗体类属性修改(VC_MFC)
  12. mix2线刷开发板救砖_小米MIX2线刷刷机教程_小米MIX2第三方rom包_线刷救砖教程
  13. linux fedora14 u盘运行,用U盘安装FEDORA14后必须从U盘启动,从硬盘无法启动
  14. 遥感图像预处理—步骤
  15. python怎么把小写改成大写_Python 把金额小写转换成大写
  16. 【Android 逆向】Android 逆向用途 | Android 逆向原理
  17. 借助WPS将Word文档转换为PPT文档
  18. 解决 git 文件夹不显示绿色图标和红色图标的问题
  19. 在不开启回收站的情况下恢复Hadoop误删除文件
  20. airtest获取当前设备序列号,并连接

热门文章

  1. Maven学习总结(7)——eclipse中使用Maven创建Web项目
  2. python用户登录三次机会的注释_用户登录(三次错误机会)(示例代码)
  3. php微信回复乱码,php版本微信公众平台回复乱码问题解决方法
  4. AspectJ入门(一)
  5. 匿名对象方案与实体对象方案对比
  6. 苹果笔记本单独安装win10
  7. read.table与readr::read_delim
  8. set是无序集合,放入set中的元素通过iterator输出时候是无序的
  9. 重拾阅读--朝花夕拾啊
  10. J2EE常用Listener(转载)