没有合适的资源?快使用搜索试试~ 我知道了~
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
需积分: 0 0 下载量 157 浏览量
2023-10-09
10:02:13
上传
评论
收藏 2.04MB PDF 举报
温馨提示
试读
35页
本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。 本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的请随意。 希望读者读完本文,有一定的启发思考,也能对自己的 Vue 掌握程度有一定的认识,对缺漏之处进行弥补,对 Vue 有更好的掌握。文章最后一题,欢迎同学们积极回答,分享各自的经验 ~~
资源推荐
资源详情
资源评论
2023/10/9 09:58
30 道 Vue ⾯试题,内含详细讲解(涵盖⼊门到精通,⾃测 Vue 掌握程度)
30
道
V
u
e
⾯
试
题
,
内
含
详
细
讲解
(
涵
盖
⼊
⻔
到
精
通
,
⾃
测
V
u
e
掌握
程
度
)
1
、
说说
你
对
SPA
单
⻚⾯
的
理
解
,
它
的
优
缺
点
分别
是
什么
?
SPA
(
s
i
n
g
l
e
-
p
age
a
ppl
ica
t
i
on
)
仅
在
W
eb
⻚⾯
初
始
化
时
加
载
相
应
的
H
T
ML
、
J
a
v
a
S
c
r
i
pt
和
CSS
。
⼀
旦
⻚⾯
加
载
完
成
,
SPA
不
会
因
为
⽤
户
的
操
作
⽽
进
⾏
⻚⾯
的
重
新
加
载
或
跳
转
;
取
⽽
代之
的
是
利
⽤
路
由
机
制
实
现
H
T
ML
内
容
的
变
换
,
U
I
与
⽤
户
的
交互
,
避
免
⻚⾯
的
重
新
加
载
。
优
点
:
⽤
户
体
验
好
、
快
,
内
容
的
改
变
不
需
要
重
新
加
载
整
个
⻚⾯
,
避
免
了
不
必
要
的
跳
转
和
重
复
渲
染
;
基
于
上
⾯
⼀
点
,
SPA
相
对对
服
务
器
压
⼒
⼩
;
前
后
端
职
责
分
离
,
架构
清
晰
,
前
端
进
⾏
交互
逻辑
,
后
端
负责
数据
处
理
;
缺
点
:
初
次
加
载
耗
时
多
:
为
实
现
单
⻚
W
eb
应
⽤
功
能
及
显
示
效
果
,
需
要
在
加
载
⻚⾯
的
时
候
将
J
a
v
a
S
c
r
i
pt
、
CSS
统
⼀
加
载
,
部
分
⻚⾯
按
需
加
载
;
前
进
后
退
路
由
管
理
:
由
于
单
⻚
应
⽤
在
⼀个
⻚⾯
中
显
示
所
有
的
内
容
,
所
以
不
能
使
⽤
浏
览
器
的
前
进
后
退
功
能
,
所
有
的
⻚⾯
切
换
需
要
⾃
⼰
建
⽴
堆
栈
管
理
;
SEO
难
度
较
⼤
:
由
于
所
有
的
内
容
都
在
⼀个
⻚⾯
中
动
态
替
换
显
示
,
所
以
在
SEO
上
其
有
着
天
然
的
弱
势
。
2
、
v
-
s
h
ow
与
v
-
if
有
什么
区
别
?
v
-
if
是
真
正
的
条
件
渲
染
,
因
为
它
会
确
保
在
切
换
过
程
中
条
件
块
内
的
事件
监
听
器
和
⼦
组
件
适
当
地
被
销
毁
和
重
建
;
也
是
惰
性
的
:
如
果
在
初
始
渲
染时条
件为
假
,
则
什么也
不
做
——
直
到
条
件
第
2023/10/9 09:58
30 道 Vue ⾯试题,内含详细讲解(涵盖⼊门到精通,⾃测 Vue 掌握程度)
⼀
次
变
为
真
时
,
才
会
开
始
渲
染条
件
块
。
v
-
s
h
ow
就
简
单
得
多
——
不
管
初
始
条
件
是
什么
,
元
素
总
是
会
被
渲
染
,
并
且
只
是
简
单
地
基
于
CSS
的
“
di
spl
a
y
”
属
性
进
⾏
切
换
。
所
以
,
v
-
if
适
⽤
于
在
运
⾏
时
很
少
改
变
条
件
,不
需
要
频
繁
切
换
条
件
的
场
景
;
v
-
s
h
ow
则
适
⽤
于
需
要
⾮
常
频
繁
切
换
条
件
的
场
景
。
3
、
C
l
a
ss
与
S
tyl
e
如
何
动
态
绑
定
?
C
l
a
ss
可
以
通过
对
象
语
法
和
数
组
语
法
进
⾏
动
态
绑
定
:
对
象
语
法
:
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
数
组
语
法
:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
S
tyl
e
也
可
以
通过
对
象
语
法
和
数
组
语
法
进
⾏
动
态
绑
定
:
2023/10/9 09:58
30 道 Vue ⾯试题,内含详细讲解(涵盖⼊门到精通,⾃测 Vue 掌握程度)
对
象
语
法
:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
数
组
语
法
:
<div v-bind:style="[styleColor, styleSize]"></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
4
、
怎
样
理
解
V
u
e
的
单向
数据
流
?
所
有
的
prop
都
使
得
其
⽗
⼦
prop
之
间
形
成
了
⼀个
单向
下
⾏
绑
定
:
⽗
级
prop
的
更
新
会
向
下
流
动到
⼦
组
件中
,
但
是
反
过
来
则
不
⾏
。
这
样
会
防
⽌
从
⼦
组
件
意
外
改
变
⽗
级组
件
的
状
态
,
从
⽽
导
致
你
的
应
⽤
的
数据
流
向
难
以
理
解
。
额
外
的
,
每次
⽗
级组
件
发
⽣
更
新
时
,
⼦
组
件中
所
有
的
prop
都
将
会
刷
新
为
最
新
的
值
。
2023/10/9 09:58
30 道 Vue ⾯试题,内含详细讲解(涵盖⼊门到精通,⾃测 Vue 掌握程度)
这
意
味
着
你
不
应
该
在
⼀个
⼦
组
件
内
部
改
变
prop
。
如
果
你
这
样
做
了
,
V
u
e
会
在
浏
览
器
的
控
制
台
中
发
出
警
告
。
⼦
组
件
想
修
改
时
,
只
能
通过
$
e
m
i
t
派
发
⼀个
⾃
定
义事件
,
⽗
组
件
接收
到
后
,
由
⽗
组
件修
改
。
有
两
种
常
⻅
的
试
图
改
变
⼀个
prop
的
情
形
:
这
个
prop
⽤
来
传
递
⼀个
初
始
值
;
这
个
⼦
组
件
接
下
来
希
望
将
其
作为
⼀个
本
地
的
prop
数据
来
使
⽤
。
在
这
种
情
况
下,
最
好
定
义
⼀个
本
地
的
da
t
a
属
性并
将
这
个
prop
⽤
作
其初
始
值
:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
这
个
prop
以
⼀
种
原
始
的
值
传
⼊
且
需
要
进
⾏
转
换
。
在
这
种
情
况
下,
最
好
使
⽤
这
个
prop
的
值
来
定
义
⼀个
计
算
属
性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
5
、
c
omput
ed
和
w
a
t
ch
的
区
别
和
运
⽤
的
场
景
?
2023/10/9 09:58
30 道 Vue ⾯试题,内含详细讲解(涵盖⼊门到精通,⾃测 Vue 掌握程度)
c
omput
ed
:
是
计
算
属
性
,
依
赖
其
它属
性
值
,
并
且
c
omput
ed
的
值
有
缓
存
,
只
有
它
依
赖
的
属
性
值
发
⽣
改
变
,下⼀
次
获
取
c
omput
ed
的
值
时
才
会
重
新
计
算
c
omput
ed
的
值
;
w
a
t
ch
:
更
多
的
是
「
观
察
」
的
作
⽤
,
类
似于
某
些
数据
的监
听
回
调
,
每
当
监
听
的
数据
变
化
时
都
会
执
⾏
回
调
进
⾏
后
续
操
作
;
运
⽤
场
景
:
当
我
们
需
要
进
⾏
数
值
计
算
,
并
且
依
赖
于
其
它
数据
时
,
应
该
使
⽤
c
omput
ed
,
因
为
可
以
利
⽤
c
omput
ed
的
缓
存
特
性
,
避
免
每次
获
取
值
时
,
都
要
重
新
计
算
;
当
我
们
需
要
在
数据
变
化
时
执
⾏
异
步
或
开
销
较
⼤
的
操
作
时
,
应
该
使
⽤
w
a
t
ch
,
使
⽤
w
a
t
ch
选
项
允
许
我
们
执
⾏
异
步
操
作
(
访
问
⼀个
API
)
,
限
制
我
们
执
⾏该
操
作
的
频
率
,
并
在
我
们
得
到
最
终结
果
前
,
设
置
中
间
状
态
。
这
些
都
是
计
算
属
性
⽆
法
做到
的
。
6
、
直
接
给
⼀个
数
组
项
赋
值
,
V
u
e
能
检
测
到
变
化
吗
?
由
于
J
a
v
a
S
c
r
i
pt
的
限
制
,
V
u
e
不
能
检
测
到
以
下
数
组
的
变
动
:
当
你
利
⽤
索
引
直
接
设
置
⼀ 个
数
组
项
时
,
例
如
:
vm.items[indexOfItem] =
newValue
当
你修
改数
组
的
⻓
度
时
,
例
如
:
vm.items.length = newLength
为了
解
决
第
⼀个
问题
,
V
u
e
提
供了以
下
操
作
⽅
法
:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set
,
Vue.set
的
⼀个
别
名
vm.$set(vm.items, indexOfItem, newValue)
剩余34页未读,继续阅读
资源评论
逗比小码农
- 粉丝: 2
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功