前端高频面试题汇总（一）
前端高频面试题
一： 你们项目用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。并且点击
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;相对定位：相对定位是相对于元素在文档中的初始位置；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。