前端面试官喜欢听到的答案-Vue

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

image

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,就会继续追问如果想要再把这个值设置回去要怎么做,当然一般会让问到这个程度的这个问题他都答不上来了。

期望答案

image

watch监听对象

问题

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

问题描述

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

期望答案

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

image

如果对整个obj深层监听

image

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。

image

$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 函数返回的对象。

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

image

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的问题)的详细内容

给大家推荐一个学习交流Q群,群号:1093606290,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。对web开发技术感兴趣的同学,欢迎加qun:四八四七五七七六零,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352