Vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架。很多企业在招聘前端工程师时都会考察其对Vue的了解,接下来小编就给大家分享常见的Vue面试题答疑。
1、如何watch监听一个对象内部的变化?
如果只是监听obj内的某一个属性变化,可以直接obj.key进行监听。
watch: {
‘obj.question’: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing…’
this.debouncedGetAnswer()
}
}
如果对整个obj深层监听
watch: {
obj: {
handler: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing…’
this.debouncedGetAnswer()
},
deep: true,
immediate: true
}
}
immediate的作用:当值第一次进行绑定的时候并不会触发watch监听,使用immediate则可以在最初绑定的时候执行。
2、v-for循环时为什么要加key?
Vue的DOM渲染是虚拟DOM,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
3、
n
e
x
t
T
i
c
k
有
什
么
作
用
?
有
些
时
候
在
改
变
数
据
后
立
即
要
对
D
O
M
进
行
操
作
,
此
时
获
取
到
的
D
O
M
仍
是
获
取
到
的
是
数
据
刷
新
前
的
D
O
M
,
无
法
满
足
需
要
,
这
个
时
候
就
用
到
了
nextTick有什么作用? 有些时候在改变数据后立即要对DOM进行操作,此时获取到的DOM仍是获取到的是数据刷新前的DOM,无法满足需要,这个时候就用到了
nextTick有什么作用?有些时候在改变数据后立即要对DOM进行操作,此时获取到的DOM仍是获取到的是数据刷新前的DOM,无法满足需要,这个时候就用到了nextTick。
4、Vue中的
s
e
t
有
什
么
用
?
向
响
应
式
对
象
中
添
加
一
个
属
性
,
并
确
保
这
个
新
属
性
同
样
是
响
应
式
的
,
且
触
发
视
图
更
新
。
它
必
须
用
于
向
响
应
式
对
象
上
添
加
新
属
性
,
因
为
V
u
e
无
法
探
测
普
通
的
新
增
属
性
(
比
如
t
h
i
s
.
m
y
O
b
j
e
c
t
.
n
e
w
P
r
o
p
e
r
t
y
=
′
h
i
′
)
。
5
、
组
件
间
的
传
值
方
式
有
哪
些
?
1
)
p
r
o
v
i
d
e
/
i
n
j
e
c
t
这
对
选
项
需
要
一
起
使
用
,
以
允
许
一
个
祖
先
组
件
向
其
所
有
子
孙
后
代
注
入
一
个
依
赖
,
不
论
组
件
层
次
有
多
深
,
并
在
起
上
下
游
关
系
成
立
的
时
间
里
始
终
生
效
。
2
)
V
u
e
.
o
b
s
e
r
v
a
b
l
e
让
一
个
对
象
可
响
应
。
V
u
e
内
部
会
用
它
来
处
理
d
a
t
a
函
数
返
回
的
对
象
。
返
回
的
对
象
可
以
直
接
用
于
渲
染
函
数
和
计
算
属
性
内
,
并
且
会
在
发
生
改
变
时
触
发
相
应
的
更
新
。
也
可
以
作
为
最
小
化
的
跨
组
件
状
态
存
储
器
,
用
于
简
单
的
场
景
。
3
)
set有什么用? 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为Vue无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。 5、组件间的传值方式有哪些? 1)provide / inject 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。 2)Vue.observable 让一个对象可响应。Vue内部会用它来处理 data 函数返回的对象。 返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景。 3)
set有什么用?向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为Vue无法探测普通的新增属性(比如this.myObject.newProperty=′hi′)。5、组件间的传值方式有哪些?1)provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。2)Vue.observable让一个对象可响应。Vue内部会用它来处理data函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景。3)attrs
包含了父作用域中不作为prop被识别 (且获取) 的特性绑定(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过 v-bind="
a
t
t
r
s
"
传
入
内
部
组
件
—
—
在
创
建
高
级
别
的
组
件
时
非
常
有
用
。
4
)
attrs" 传入内部组件——在创建高级别的组件时非常有用。 4)
attrs"传入内部组件——在创建高级别的组件时非常有用。4)listeners
包含了父作用域中的 (不含.native修饰器的) v-on事件监听器。它可以通过 v-on="
l
i
s
t
e
n
e
r
s
"
传
入
内
部
组
件
—
—
在
创
建
更
高
层
次
的
组
件
时
非
常
有
用
。
5
)
p
r
o
p
s
6
)
listeners" 传入内部组件——在创建更高层次的组件时非常有用。 5)props 6)
listeners"传入内部组件——在创建更高层次的组件时非常有用。5)props6)emit
7)eventbus
8)Vuex
9)
p
a
r
e
n
t
/
parent/
parent/children/ref
6、Vue生命周期函数有哪些?
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
Destroyed
面试是你走向职场的敲门砖,大家一定要好好准备!