前端面试题总结

1.节流和防抖的区别

防抖:在一定的时间内触发一次

节流:触发最后一次

页面回流和重绘;

2.v-show  display none/block 改变css,频繁操作节省开销

v-if 控制展示和不展示的,对dom的操作,用于切换不频繁的场景

3.vue传值方式有哪几种

(1)props:父给子传值

(2)父组件通过$refs获取子组件的数据和方法,子组件给父组件传值;

(3)广播传值,父子组件、兄弟组件间进行传值;vueEvents.js  eventbus??事件总线跨越多个层级,

//发送广播

vueEvents.$emit('notifyToNew',this.homeMsg+numbery);

//接收广播

vueEvents.$on("notifyToNew",function(data_P){

            //注意this的作用域

          console.log('广播传过来的值是'+data_P);

          _this.receive = data_P;

    })

(4)localstorage本地缓存

存:localStorage.setItem('tolist',JSON.stringify(this.tolist));

取:vartolist=JSON.parse(localStorage.getItem('tolist'));

(5)vuex

state:存储数据

mutations:(同步)定义方法,方法的作用是修改state中的数据

action:(异步)Action 提交的是 mutation,而不是直接变更状态。

getter:从基本数据(state)派生的数据,相当于state的计算属性。

modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

使用下面这两种方法存储数据:

  dispatch:异步操作,写法: this.$store.dispatch('action方法名',值)

  commit:同步操作,写法:this.$store.commit('mutations方法名',值)

项目结构:

https://www.shangmayuan.com/a/e3ac0302b11d42228252c043.html

(6)路由传值

(1).父组件push使用this.$router.push

(2).在子组件中获取参数的时候是this.$route.params


4.封装过vue的组件或者插件吗?

slot插槽==》用于公共组件不同的部分

5.vue双向绑定原理 //www.greatytc.com/p/e7ebb1500613

 model => view 以及view => model 的双向绑定。

6.axios的二次封装

404等错误做拦截统一处理

token放入header

7.路由守卫

判断权限,登录界面beforeeach去做的

8.移动端怎么处理跨域问题

9.小程序中冒泡事件怎么解决

bindtap

catchtap可以解决冒泡事件,在子组件里添加该事件则父组件就不会接受到该事件。

10.小程序登录的时候,正则表达式判断一下手机号格式

11.vue项目对webpack做过哪些配置?

12.前端项目vue的优化方案?

(1)使用计算属性:computed

计算属性的最大特点是它可以被缓存,只要它的依赖不被改变就不会被重新求值,再次访问会直接拿到缓存的值在做一些复杂计算时,可以极大提升性能。

(2)使用函数式组件

参考官网:https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6

函数式组件是无状态的,无实例的,在初始化时不需要初始化状态,不需要创建实例,也不需要去处理生命周期等,相比有状态组件,会更加轻量,同时性能也更好。

(3)结合场景使用v-show和v-if

v-show是通过切换元素的display属性来控制的,和v-if相比不需要在patch阶段创建/移除节点,只是根据v-show上绑定的值来控制dom元素的style.display属性,在频繁切换的场景下可以节省很多性能。

如果初始值是false,v-if不会创建隐藏的节点,但是v-show会创建,造成了性能的浪费。

所以,v-if的优势体现在初始化时,v-show体现在更新时。

(4)keep-alive

在动态组件的场景下,由多个组件来回切换,用keep-alive作缓存,它的作用是将它包裹的组件在第一次渲染后就缓存起来,下次需要的时候就直接从缓存里读取,避免了不必要的性能浪费。

动态组件:

<template>

  <div>

    <keep-alive>

        <component :is="current" />

   </keep-alive>

  </div>

</template>

(5)避免v-for和v-if同时使用

https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

(6)

13.js的原型链

proptype-object

14.闭包

15.canvas

16.echarts

17.移动端适配 

rem布局

html的fontsize怎么设置? 

先计算屏幕宽度/7.5 (移动端的图一般都是750px)

18.如何实现一个元素在父元素中绝对居中?

水平 、垂直居中

水平居中 margin: 0 auto实现水平居中


(1)display:flex 弹性盒模型

设置父元素(这里是指body)的display的值为flex即可。具体代码如下,对代码不做过多的解释,如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex; align-items: center;/*定义body的元素垂直居中*/ justify-content: center;/*定义body的里的元素水平居中*/

(2)

19. 和后台交互是怎么封装的?

对错误码和请求头header做处理? 比如header上绑定请求头。

20.vue和jquery的区别?

jquery使用选择器选择dom

vue使用虚拟dom,对象和操作dom分离开,相对于jquery性能消耗低。

21.localstorage,sessionstorage,cookiestorage

localstorage 持久性好,关闭页面后还存在

sessionstorage 基于会话,会话结束后就会结束

cookiestorage容量小,

22.动态路由

addroutes动态路由,聪前端配置权限,后端获取数据配置路由。

23.文件上传,大文件怎么处理?

24.excel导出? 

前端的插件 

25.怎么理解面向对象开发vue和函数式编程react?

26.动态表单

前端通过拖拽形成json数据发送给后端,根据后端返回的数据渲染前端表单数据

json数据里有个type,比如渲染成input形成输入类型表单

27.typescript??

28.怎么处理两个异步请求?

promise.then

ES7 await


29.vue事件修饰符

stop

prevent  

30 v-router location.href跳转的区别

location.href跳转 会刷新页面。

31.es6模版组件库

32.如何阻止冒泡事件?stop.

还有其他vue事件的修饰符 prevent

阻止默认事件

33.页面加载过慢的原因

34.vue watch 和computed使用方式区别

35.MVVM框架和适用场景

36.scss?

37.回流和重绘

38.清除浮动的方式

clear

39.添加点击事件,同一个元素添加两个点击事件

window.

40.vue router路由模式

history保存路由组件到浏览器 keep-alive ,提高用户体验度,看是否需要重新加载

hash

41.监听路由参数的变化

42.js对数组的操作方法

find filter foreach length map 取出某些数据

some查找某一行

includes concat set去重

数组尾部插入数据的方法

43.false&&false = false

44.在js中如何控制一段函数顺序执行

await 解决回调地狱

45.什么是样式穿透?

/deep/ 都是深度选择器

46.假如页面有个图标不显示了,如何分析问题?

console控制台报错

css未给高度和宽度

47.以逗号作分割的字符串分隔为 数组?

split

48.less和scss的区别

49.怎么理解js的单线程

websocket是双向,多次的

50.操作一个字符串的方法

51.如何配置ios的齐刘海,填满?

flex:1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,151评论 6 523
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,465评论 3 405
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,429评论 0 368
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,147评论 1 301
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,149评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,614评论 1 315
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,965评论 3 429
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,950评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,486评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,524评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,640评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,228评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,976评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,407评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,552评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,215评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,714评论 2 366

推荐阅读更多精彩内容