前两天一个朋友来杭州找工作了,我整理了下他的面试题
先说下他的情况:
19年毕业,差不多一年工作经验,前端。刚开始找了一周,面试寥寥,我让他改成两年工作经验,实习一年工作一年。
不是想骗什么,主要是现在疫情原因,工作不好找,他写了一年工作经验,都没人理他。这个东西也不是简历修改年限公
司就能要他,这还是要看能力,只是让机会更多些。我个人感觉没有什么问题,勿喷。果然改了简历后面试机会就多了起
来,下 面是他面试时面试官问的一些问题,我在这里整理下,希望能帮到别人。
@ toc
1. Vue组件中的data为什么必须是一个函数
总结:
避免组件之间数据造成污染
延伸: 什么叫组件
组件是一个可复用的vue的实例,所以其他调用这个组件的,可能会调取这个data,所以把data封装成一个函数,我们在实例化组件的时候只是调用了这个函数生成的数据副本,这就避免了数据污染。
2.箭头函数中this和普通函数中this的区别
普通:
- 一般方法中,this代指全局对象 window
- 作为对象方法调用,this代指当前对象
- 作为构造函数调用,this 指代new 出的对象
- 调用方法的apply和call方法,可以改变函数的调用对象/作用域 (this)用法:
箭头函数
箭头函数的this总是指向词法作用域,也就是外层调用者obj
由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略
3.计算属性和监听的区别(使用场景)
1、区别
watch中的函数是不需要调用的
watch 属性监听 监听属性的变化
computed内部的函数调用的时候不需要加()
computed:计算属性通过属性计算而得来的属性
computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
computed中的函数必须用return返回最终的结果
当computed中的函数所依赖的属性如果没有发生改变的时候,那么调用当前函数的时候结果会从缓存中读取
2、使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子: 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch搜索数据
4.vue生命周期
beforeCreate (新对象诞生)
Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问 。我们可以在这个钩子中插入我们的代码,在对象初始化之前执行。
Created (具有默认特性的对象)
在这个生命阶段,对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。
beforeMount (对象在DOM中适合形状)
这个钩子被调用 beforeMounted。在这个阶段,它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板,那么它将所定义元素的外部HTML视为模板。
Mounted (DOM已准备就绪并放置在页面内)
一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。
beforeUpdate (更改已完成,但尚未准备好更新DOM)
在外部事件/用户输入beforeUpdate发生更改时,此钩子即 在反映原始DOM元素的更改之前被触发。
Updated (在DOM中呈现的更改)
通过实际更新DOM对象并触发updated,屏幕上的变化得到呈现 。
beforeDestroy (对象准备销毁)
就在Vue对象被破坏并从内存中释放之前, deforeDestroy 钩子被触发,并允许我们在其中处理我们的自定义代码。
Destroyed (对象停止并从内存中删除)
该 destroyed 钩子被成功运行销毁对象上调用。
5.http状态码
2XX: 成功
3XX 重定向
4XX:客户端错误
5XX 服务端错误
6.两个页面之间的跳转
1.router-lin to (vue 方法)
2.事件触发 this.
r
o
u
t
e
r
.
p
u
s
h
(
"
/
"
)
;
3.
t
h
i
s
.
router.push("/"); 3.this.
router.push("/");3.this.router.go(1); 主要用于返回上个页面
7.路由传参
1.直接调用
r
o
u
t
e
r
.
p
u
s
h
实
现
携
带
参
数
的
跳
转
:
t
h
i
s
.
router.push 实现携带参数的跳转: this.
router.push实现携带参数的跳转:this.router.push({
path: /describe/${id}
,
})
这种路由需要配置 path: ‘/describe/:id’,
取参: this.$route.params.id
2.通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.
r
o
u
t
e
r
.
p
u
s
h
(
n
a
m
e
:
′
D
e
s
c
r
i
b
e
′
,
p
a
r
a
m
s
:
i
d
:
i
d
)
这
种
好
处
在
于
传
多
个
数
据
,
传
对
象
什
么
的
,
不
配
置
路
由
u
r
l
上
就
不
显
示
,
比
较
整
洁
取
参
:
t
h
i
s
.
router.push({ name: 'Describe', params: { id: id } }) 这种好处在于传多个数据,传对象什么的,不配置路由url上就不显示,比较整洁 取参:this.
router.push(name:′Describe′,params:id:id)这种好处在于传多个数据,传对象什么的,不配置路由url上就不显示,比较整洁取参:this.route.params 取id时: this.
r
o
u
t
e
.
p
a
r
a
m
s
.
i
d
3.
使
用
p
a
t
h
来
匹
配
路
由
,
然
后
通
过
q
u
e
r
y
来
传
递
参
数
,
这
种
情
况
下
q
u
e
r
y
传
递
的
参
数
会
显
示
在
u
r
l
后
面
?
i
d
=
?
t
h
i
s
.
route.params.id 3.使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=? this.
route.params.id3.使用path来匹配路由,然后通过query来传递参数,这种情况下query传递的参数会显示在url后面?id=?this.router.push({
path: ‘/describe’,
query: {
id: id
}
})
取参:this.$route.query.id
注: 取参用的是route 不是router
8.在created和mounted中应该写什么代码
Created:常用于简单的ajax请求,页面的初始化
Mounted:常用于获取VNode信息和操作,ajax请求
我个人理解: mounted 主要写需要操作dom的请求, created写不需要操作dom的请求
9.闭包
1、概念
闭包函数:声明在一个函数中的函数,叫做闭包函数。
闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。
2、特点
让外部访问函数内部变量成为可能;
局部变量会常驻在内存中;
可以避免使用全局变量,防止全局变量污染;
会造成内存泄漏(有一块内存空间被长期占用,而不被释放)
10.foreach和map区别
map:遍历数组中每个元素并返回一个新数组,不改变原数组,
forEach:遍历数组中每个元素但是没有返回值
注: 这个写一遍就知道了,map需要return forEach不需要,forEach 可以直接对数组进行一些操作运算什么的,会改变原来数组
11.数组中some的方法
some 判断作用, 有一个符合条件就返回true,否则返回false
let a = [1,2,3,4,5];
// let b = a.some(item => item > 2); true 和下面是一样的
let b = a.some((item) => {
console.log(item);
return item > 4;
})
console.log(b) // true*/
12.组件之间的通信
https://www.cnblogs.com/barryzhang/p/10566515.html
1.props和
e
m
i
t
父
组
件
向
子
组
件
传
递
数
据
是
通
过
p
r
o
p
传
递
的
,
子
组
件
传
递
数
据
给
父
组
件
是
通
过
emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过
emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过emit触发事件来做到的.
2.
a
t
t
r
s
和
attrs和
attrs和listeners
Vue 2.4开始提供了
a
t
t
r
s
和
attrs和
attrs和listeners来解决这个问题,能够让组件A之间传递消息给组件C。
3.中央事件总线
新建一个Vue事件bus对象,然后通过bus.
e
m
i
t
触
发
事
件
,
b
u
s
.
emit触发事件,bus.
emit触发事件,bus.on监听触发的事件。
4.provide和inject
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
5.v-model
父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值
注: 这个我也没用过
6.
p
a
r
e
n
t
和
parent和
parent和children
在组件内部可以直接通过子组件
p
a
r
e
n
t
对
父
组
件
进
行
操
作
,
父
组
件
通
过
parent对父组件进行操作,父组件通过
parent对父组件进行操作,父组件通过children对子组件进行操作.
注: 没用过
7. vuex处理组件之间的数据交互
13.vue3.0和vue2.0的区别
1.默认进行懒观察(lazy observation)。
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
2.更精准的变更通知。 这两个我感觉能回答上就行了
比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。
9. 3.0 新加入了 TypeScript 以及 PWA 的支持
4.部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
5.默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
14.https和http区别
HTTP是一种用于分布式、协作式和超媒体信息系统的应用层协议
https是在http协议基础上加入加密处理和认证机制以及完整性保护,即http+加密+认证+完整性保护=https
注: 我认为 https 就是比http 安全,我之前做项目 后端有用到过,需要证书认证什么的
15.菜单栏
这个我不太理解
16.ajax(方法)
主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,从而创建快速动态网页的技术。
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
- 设置响应 HTTP 请求状态变化的函数
- 发送 HTTP 请求
- 获取异步调用返回的数据
- 使用 JavaScript 和 DOM 实现局部刷新
优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验
缺点:对搜索引擎不友好,要实现ajax下的前进后退功能成本较大;跨域问题限制
17.vue-cli
俗称 vue-cli 为脚手架,是一套大众化的前端自动化解决方案,他的核心是 webpack ,框架是vue,还有相关辅助插件组成。
配置一套理想的方案也是相当耗费时间,所以 vue 就提供了一套面相大众的内解决方案——vue-cli,他的输入输出规则,文件的打包路径,模块的命名基本上符合大众前端开发者的习容惯,不过实际开发中需要一定的调整。
注: 总的来说就是创建项目用的
18.怎么打包项目?(项目怎么看)
项目打包
终端运行命令 npm run build
打包的一些配置可以配置,一般在vue.config.js中做配置,比如压缩图片,打包地址什么的
外网:线上地址(需要配置)
内网:本地地址
也就是看你是开发环境还是生产环境
开发环境一般都是本地地址,生产环境就是线上的地址,看后端的配置
19.Link
link标签,当在文档中声明使用外接资源(比如CSS)时使用此标签
href – 指定需要加载的资源(CSS文件)的地址URI
media – 媒体类型
rel – 指定链接类型,设定是指对象和链接目标的关系,可选值, link还可以用Shortcut Icon等
rev – 指定链接类型
type – 指定所连接文档的MIME类型,css的MIME是type/css,一般使用type=“text/css”
20.项目怎么搭建起来的?
搭建流程 :
https://blog.csdn.net/weixin_46096120/article/details/105295148
使用vue cli 搭建项目框架,
一般就是搭建的配置,vue-router,vuex 严格模式什么的
然后进来先写下公共组件,封装axios,接口写好的话,封装接口什么的
21.less定义一个通用的样式怎么定义
@color:#4D926F;
#header{
color:@color;
}
22.cookie,sessionStorage,localStorage区别
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
2.有效时间
localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage:数据在当前浏览器窗口关闭后自动删除。
cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
注:
这里面有些我自己的理解,可能错误,或者不到位,哪位老哥发现了,请告诉我,我改正,谢谢!