前端高频面试题
一: 你们项目用vue跨域是怎么解决的
vue脚手架 用config的index.js
通过ProxyTable来设置的。
二: vue的实现原理
最大的特点就是组件化开发 双向绑定 数据的更新 视图改变。
- vue最大特点我感觉就是“组件化“和”数据驱动“
组件化就是可以将页面和页面中可复用的元素都看做成组件,写页面的过程,就是写组件,然后页面是由这些组件“拼接“起来的组件树 - 数据驱动就是让我们只关注数据层,只要数据变化,页面(即视图层)会自动更新,至于如何操作dom,完全交由vue去完成,咱们只关注数据,数据变了,页面自动同步变化了,很方便
三: 图片懒加载如何封装?
-
原理:懒加载突出一个“懒”字,懒就是拖延迟的意思,所以“懒加载”说白了就是延 迟加载,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可 视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了
可视区域在加载。 -
为什么要实现懒加载?
懒加载是一种网页性能优化的方式,它能极大的提升用户体验。就比如说
图片,图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很
经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载
出来用户也早就走了。所以,我们需要懒加载,进入页面的时候,只请求可视
区域的图片资源。总结出来就两个点: 1.全部加载的话会影响用户体验 2.浪费用户的流量,有些用户并不像全部看完,全部加载会耗费大量流量
-
.懒加载的实现原理?
由于网页中占用资源较多的一般是图片,所以我们一般实施懒加载都是对图
片资源而言的,所以这里的实现原理主要是针对图片。 大家都知道,一张图片就是一个标签,而图片的来源主要是src属性。浏 览器是否发起亲求就是根据是否有src属性决定的。 既然这样,那么我们就要对标签的src属性下手了,在没进入可视区域 的时候,我们先不给这个标签赋src属性,这样岂不是浏览器就不会发送 请求了。
四: vue-router的实现原理,路由跳转 。
答:前端路由实现原理主要通过以下两种技术实现的
第一种:利用H5的history API实现
主要通过history.pushState 和 history.replaceState来实现,不同之处在于,pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache]
第二种:利用url的hash实现
我们经常在 url 中看到 #,这个 # 有两种情况,一个是我们所谓的锚点,路由里的 # 不叫锚点,我们称之为 hash,我们说的就是hash,主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新
总结:hash 方案兼容性好,而H5的history主要针对高级浏览器。
以下为具体的API的区别:
this.
r
o
u
t
e
r
.
p
u
s
h
(
l
o
c
a
t
i
o
n
,
o
n
C
o
m
p
l
e
t
e
?
,
o
n
A
b
o
r
t
?
)
这
个
方
法
会
向
h
i
s
t
o
r
y
栈
添
加
一
个
新
的
记
录
,
所
以
,
当
用
户
点
击
浏
览
器
后
退
按
钮
时
,
则
回
到
之
前
的
U
R
L
。
并
且
点
击
<
r
o
u
t
e
r
−
l
i
n
k
:
t
o
=
"
.
.
.
"
>
等
同
于
调
用
r
o
u
t
e
r
.
p
u
s
h
(
.
.
.
)
。
t
h
i
s
.
router.push(location, onComplete?, onAbort?) 这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。并且点击 <router-link :to="...">等同于调用 router.push(...)。 this.
router.push(location,onComplete?,onAbort?)这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。并且点击<router−link:to="...">等同于调用router.push(...)。this.router.replace(location, onComplete?, onAbort?) 这个方法不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录,所以,当用 户点击浏览器后退按钮时,并不会回到之前的 URL。
this.
r
o
u
t
e
r
.
g
o
(
n
)
这
个
方
法
的
参
数
是
一
个
整
数
,
意
思
是
在
h
i
s
t
o
r
y
记
录
中
向
前
或
者
后
退
多
少
步
,
类
似
w
i
n
d
o
w
.
h
i
s
t
o
r
y
.
g
o
(
n
)
。
以
上
也
可
能
会
形
成
一
个
新
的
面
试
题
:
r
e
p
l
a
c
e
和
p
u
s
h
的
区
别
可
以
说
,
以
前
在
一
个
项
目
里
面
配
置
了
一
个
二
级
路
由
,
里
面
有
t
a
b
切
换
部
分
(
详
情
,
评
价
,
说
明
)
,
因
为
返
回
上
一
页
的
时
候
,
不
能
在
这
几
个
选
项
卡
之
间
来
回
切
换
.
所
以
我
使
用
了
t
h
i
s
.
router.go(n) 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。 以上也可能会形成一个新的面试题:replace和push的区别 可以说,以前在一个项目里面配置了一个二级路由,里面有tab切换部分(详情,评价,说明),因为返回上一页的时候,不能在这几个选项卡之间来回切换.所以我使用了this.
router.go(n)这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n)。以上也可能会形成一个新的面试题:replace和push的区别可以说,以前在一个项目里面配置了一个二级路由,里面有tab切换部分(详情,评价,说明),因为返回上一页的时候,不能在这几个选项卡之间来回切换.所以我使用了this.router.replace方法,不计入history记录中,所以不会出现,反复切换的bug
五: 你对vuex 了解多少?
答:vuex是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括state,actions,mutations,getters和modules 5个要素,主要流程:组件通过dispatch到 actions,actions是异步操作,再actions中通过commit到mutations,mutations再通过逻辑操作改变state,从而同步到组件,更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的数据做提前处理的.再说到辅助函数的作用.
六: 绝对定位跟相对定位的区别
一:绝对定位
position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的父元素(即是设置了绝对定位或者相对定位父先元素)。如果元素没有已定位的父元素,那么它的位置则是相对于最初的包含(body)。
绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序。
二:相对定位
position: relative;相对定位:相对定位是相对于元素在文档中的初始位置;
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。