没有合适的资源?快使用搜索试试~ 我知道了~
2023前端vue面试题及答案.pdf
需积分: 0 3 下载量 187 浏览量
2023-06-21
16:28:27
上传
评论
收藏 2.95MB PDF 举报
温馨提示
试读
35页
2023前端vue面试题及答案.pdf
资源推荐
资源详情
资源评论
2023
前
端
vue
⾯
试
题
及
答
案
Vue3.0
为什么
要
⽤
proxy
?
在
Vue2
中
,
0bject.defineProperty
会
改
变
原
始
数
据
,
⽽
Proxy
是
创
建
对
象
的
虚
拟
表
⽰
,
并
提
供
set
、
get
和
deleteProperty
等
处
理
器
,
这
些
处
理
器
可
在
访
问
或
修
改
原
始
对
象
上
的
属
性
时
进
⾏
拦
截
,
有
以
下
特
点
∶
•
不
需
⽤
使
⽤
Vue.$set
或
Vue.$delete
触
发
响
应
式
。
•
全
⽅
位
的
数
组
变
化
检
测
,
消
除
了
Vue2
⽆
效
的
边
界
情
况
。
•
⽀
持
Map
,
Set
,
WeakMap
和
WeakSet
。
Proxy
实
现
的
响
应
式
原
理
与
Vue2
的
实
现
原
理
相
同
,
实
现
⽅
式
⼤
同
⼩
异
∶
•
get
收
集
依
赖
•
Set
、
delete
等
触
发
依
赖
•
对
于
集
合
类
型
,
就
是
对
集
合
对
象
的
⽅
法
做
⼀
层
包
装
:
原
⽅
法
执
⾏
后
执
⾏
依
赖
相
关
的
收
集
或
触
发
逻
辑
。
说说
你
对
slot
的
理
解
?
slot
使
⽤
场
景
有
哪
些
⼀
、
slot
是
什么
在
HTML
中
slot
元
素
,
作
为
Web Components
技
术
套
件
的
⼀
部
分
,
是
Web
组
件
内
的
⼀个
占
位
符
该
占
位
符
可
以
在
后
期
使
⽤
⾃
⼰
的
标
记语
⾔
填
充
举个
栗
⼦
<template id="element-details-template">
<slot name="element-name">Slot template</slot>
</template>
<element-details>
<span slot="element-name">1</span>
</element-details>
<element-details>
<span slot="element-name">2</span>
</element-details>
1
2
3
4
5
6
7
8
9
10
template
不
会
展
⽰
到
⻚
⾯
中
,
需
要
⽤
先
获
取
它
的
引
⽤
,
然
后
添
加到
DOM
中
,
customElements.define('element-details',
class extends HTMLElement {
constructor() {
super();
const template = document
.getElementById('element-details-template')
.content;
const shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(template.cloneNode(true));
}
})
1
2
3
4
5
6
7
8
9
10
11
12
在
Vue
中
的
概
念
也
是
如
此
Slot
艺
名
插
槽
,
花
名
“
占
坑
”
,
我
们
可
以
理
解
为
solt
在
组
件
模
板
中
占
好
了
位
置
,
当
使
⽤
该
组
件
标
签
时
候
,
组
件
标
签
⾥
⾯
的
内
容
就
会
⾃
动
填
坑
(
替
换
组
件
模
板
中
slot
位
置
),
作
为
承
载
分
发
内
容
的
出
⼝
⼆
、
使
⽤
场
景
通过
插
槽
可
以
让
⽤
⼾
可
以
拓
展
组
件
,
去
更
好
地
复
⽤
组
件
和
对
其
做
定
制
化
处
理
如
果
⽗
组
件
在
使
⽤
到
⼀个
复
⽤
组
件
的
时
候
,
获
取
这
个
组
件
在
不
同
的
地
⽅
有
少
量
的
更
改
,
如
果
去
重
写
组
件
是
⼀
件
不
明智
的
事
情
通过
slot
插
槽
向
组
件
内
部
指
定
位
置
传
递
内
容
,
完
成
这
个
复
⽤
组
件
在
不
同
场
景
的
应
⽤
⽐
如
布
局
组
件
、
表
格
列
、
下
拉
选
、
弹
框
显
⽰
内
容
等
使
⽤
vue
渲
染
⼤
量
数
据
时
应
该
怎
么
优
化
?
说
下
你
的
思
路
!
分
析
企
业
级
项
⽬
中
渲
染
⼤
量
数
据
的
情
况
⽐
较
常
⻅
,
因
此
这
是
⼀
道
⾮
常
好
的
综
合
实
践
题
⽬
。
回
答
1.
在
⼤
型
企
业
级
项
⽬
中
经
常
需
要
渲
染
⼤
量
数
据
,
此
时
很
容
易
出
现
卡
顿
的
情
况
。
⽐
如⼤
数
据
量
的
表
格
、
树
2.
处
理
时
要
根
据
情
况
做
不
同
处
理
:
•
可
以
采
取
分
⻚
的
⽅
式
获
取
,
避
免
渲
染
⼤
量
数
据
•
vue-virtual-scroller
(opensnewwindow)
等
虚
拟
滚
动
⽅
案
,
只
渲
染
视
⼝
范
围
内
的
数
据
•
如
果
不
需
要
更
新
,
可
以使
⽤
v-once
⽅
式
只
渲
染
⼀
次
•
通过
v-memo
(opensnewwindow)
可
以
缓
存
结
果
,
结
合
v-for
使
⽤
,
避
免
数
据
变
化
时
不
必
要
的
VNode
创
建
•
可
以
采
⽤
懒
加
载
⽅
式
,
在
⽤
⼾
需
要
的
时
候
再
加
载
数
据
,
⽐
如
tree
组
件
⼦
树
的
懒
加
载
1.
还
是
要
看
具
体
需
求
,
⾸
先
从
设计
上
避
免
⼤
数
据
获
取
和
渲
染
;
实
在
需
要
这
样
做
可
以
采
⽤
虚
表
的
⽅
式
优
化
渲
染
;
最
后
优
化
更
新
,
如
果
不
需
要
更
新
可
以
v-once
处
理
,
需
要
更
新
可
以
v-memo
进
⼀
步
优
化
⼤
数
据
更
新
性
能
。
其
他
可
以
采
⽤
的
是
交互
⽅
式
优
化
,
⽆
线
滚
动
、
懒
加
载
等
⽅
案
scoped
样
式
穿
透
scoped
虽
然
避
免
了
组
件
间
样
式
污
染
,
但
是
很
多
时
候
我
们
需
要
修
改
组
件
中
的
某
个
样
式
,
但
是
⼜
不
想
去
除
scoped
属
性
1.
使
⽤
/deep/
<!-- Parent -->
<template>
<div class="wrap">
<Child />
</div>
</template>
<style lang="scss" scoped>
.wrap /deep/ .box{
background: red;
}
</style>
<!-- Child -->
<template>
<div class="box"></div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.
使
⽤
两个
style
标
签
<!-- Parent -->
<template>
<div class="wrap">
<Child />
</div>
</template>
1
2
3
4
5
6
7
8
<style lang="scss" scoped>
/*
其
他
样
式
*/
</style>
<style lang="scss">
.wrap .box{
background: red;
}
</style>
<!-- Child -->
<template>
<div class="box"></div>
</template>
9
10
11
12
13
14
15
16
17
18
19
20
21
Vue
中
v-html
会
导
致
哪
些
问
题
•
可
能
会
导
致
xss
攻
击
•
v-html
会
替
换掉
标
签
内
部
的
⼦
元
素
let template = require('vue-template-compiler');
let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`)
// with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}}
console.log(r.render);
// _c
定
义
在
core/instance/render.js
// _s
定
义
在
core/instance/render-helpers/index,js
if (key === 'textContent' || key === 'innerHTML') {
if (vnode.children) vnode.children.length = 0
if (cur === oldProps[key]) continue
// #6601 work around Chrome version <= 5
if (elm.childNodes.length === 1) {
elm.removeChild(elm.childNodes[0])
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如
果
让
你
从
零
开
始
写
⼀个
vuex
,
说说
你
的
思
路
思
路
分
析
这
个
题
⽬
很
有
难
度
,
⾸
先
思
考
vuex
解
决
的
问
题
:
存
储
⽤
⼾
全
局
状
态
并
提
供
管
理
状
态
API
。
•
vuex
需
求
分
析
•
如
何
实
现
这
些
需
求
回
答
范
例
1.
官
⽅
说
vuex
是
⼀个
状
态
管
理
模
式
和
库
,
并
确
保
这
些
状
态
以
可
预
期
的
⽅
式
变
更
。
可
⻅
要
实
现
⼀个
vuex
•
要
实
现
⼀个
Store
存
储
全
局
状
态
•
要
提
供
修
改
状
态
所
需
API
:
commit(type, payload), dispatch(type, payload)
1.
实
现
Store
时
,
可
以
定
义
Store
类
,
构
造
函
数
接
收
选
项
options
,
设
置
属
性
state
对
外
暴
露
状
态
,
提
供
commit
和
dispatch
修
改
属
性
state
。
这
⾥
需
要
设
置
state
为
响
应
式
对
象
,
同
时
将
Store
定
义为⼀个
Vue
插
件
2.
commit(type, payload)
⽅
法
中
可
以
获
取
⽤
⼾
传
⼊
mutations
并
执
⾏
它
,
这
样
可
以
按
⽤
⼾
提
供
的
⽅
法
修
改
状
态
。
dispatch(type, payload)
类
似
,
但
需
要
注
意
它
可
能
是
异
步
的
,
需
要
返
回
⼀个
Promise
给
⽤
⼾
以
处
理
异
步
结
果
实
践
Store
的
实
现
:
class Store {
constructor(options) {
this.state = reactive(options.state)
this.options = options
}
commit(type, payload) {
this.options.mutations[type].call(this, this.state, payload)
}
}
1
2
3
4
5
6
7
8
9
10
vuex
简
易
版
/**
* 1
实
现
插
件
,
挂
载
$store
* 2
实
现
store
*/
let Vue;
class Store {
constructor(options) {
// state
响
应
式
处
理
//
外
部
访
问
:
this.$store.state.***
1
2
3
4
5
6
7
8
9
10
11
12
剩余34页未读,继续阅读
资源评论
weishaoonly
- 粉丝: 132
- 资源: 1383
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功