面试中值得深思的问题

vue scoped的作用是什么? 如何更改element-ui样式?

CSS,VUE中<style scoped> scoped不污染其他组件, /deep/的底层原理: 打包的时候会生成一个独一无二[ha、sh]值。作用是穿透。

前段解决跨域方案?

  1. 通过jsonp跨域。
    2.document.domain + iframe跨域。
    3.location.hash + iframe。
  2. window.name + iframe跨域。
    5.postMessage跨域。
    6.跨域资源共享(CORS)。
    7.nginx代理跨域。
    8.nodejs中间件代理跨域。
    9.WebSocket协议跨域。

同一用户下同一浏览器开了两个相同地址,借助按钮操作VUEX同一state时,是否有影响?

有影响,而且取决于你最后一次操作。

什么是强缓存和协商缓存,区别是什么?

在工作中,前端代码打包之后的生成的静态资源就要发布到静态服务器上,这时候就要做对这些静态资源做一些运维配置,其中,gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。

缓存的有点:

1.减少了不必要的数据传输,节省带宽
2.减少服务器的负担,提升网站性能
3.加快了客户端加载网页的速度
4.用户体验友好

缓存的缺点

资源如果有更改但是客户端不及时更新会造成用户获取信息滞后,如果老版本有bug的话,情况会更加糟糕

强缓存

到底什么是强缓存?强在哪?其实强是强制的意思。当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制,具体表现为:
respone header 的cache-control,常见的设置是max-age public private no-cache no-store等

详细说明

max-age表示缓存的时间是31536000秒(1年),public表示可以被浏览器和代理服务器缓存,代理服务器一般可用nginx来做。immutable表示该资源永远不变,但是实际上该资源并不是永远不变,它这么设置的意思是为了让用户在刷新页面的时候不要去请求服务器!啥意思?就是说,如果你只设置了cahe-control:max-age=31536000,public 这属于强缓存,每次用户正常打开这个页面,浏览器会判断缓存是否过期,没有过期就从缓存中读取数据;但是有一些 "聪明" 的用户会点击浏览器左上角的刷新按钮去刷新页面,这时候就算资源没有过期(1年没这么快过),浏览器也会直接去请求服务器,这就是额外的请求消耗了,这时候就相当于是走协商缓存的流程了(下面会讲到)。如果cahe-control:max-age=315360000,public再加个immutable的话,就算用户刷新页面,浏览器也不会发起请求去服务,浏览器会直接从本地磁盘或者内存中读取缓存并返回200状态,看上图的红色框(from memory cache)。这是2015年facebook团队向制定 HTTP 标准的 IETF 工作组提到的建议:他们希望 HTTP 协议能给 Cache-Control 响应头增加一个属性字段表明该资源永不过期,浏览器就没必要再为这些资源发送条件请求了。

强缓存总结

1.cache-control: max-age=xxxx,public
客户端和代理服务器都可以缓存该资源;
客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,如果用户做了刷新操作,就向服务器发起http请求

2.cache-control: max-age=xxxx,private
只让客户端可以缓存该资源;代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200

3.cache-control: max-age=xxxx,immutable
客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求

4.cache-control: no-cache
跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都回询问服务端。

5.cache-control: no-store
不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。

协商缓存

上面说到的强缓存就是给资源设置个过期时间,客户端每次请求资源时都会看是否过期;只有在过期才会去询问服务器。所以,强缓存就是为了给客户端自给自足用的。而当某天,客户端请求该资源时发现其过期了,这是就会去请求服务器了,而这时候去请求服务器的这过程就可以设置协商缓存。这时候,协商缓存就是需要客户端和服务器两端进行交互的。

深入了解强缓存和协议缓存 https://www.jianshu.com/p/9c95db596df5

VUE的生命周期?路由模板加入了<keep-alive>多出的两个钩子是什么?作用是什么?

activated :路由组件被激活时触发。(当进入缓存的路由组件时触发)。
deactivated:路由组件失活时触发。(当离开缓存的路由组件时触发)。

VUEX的详细步骤。VUEX的概念.

反向说: 首先在src更目录下建立store文件如果你要分模块,用index文件导出,从建立state,mutaion(同步)更改state,action提交mutaion最好使用return newpromise 把值带出来,在main.js
引用,APP.vue挂载,组件里import {mapState,mapAction} 计算属性或methods里使用。

概念

主要是为了与组件通信,状态管理机制。

VUE路由请描述一下?

1.创建路由表。如果要配置权限的话就用到导航守卫。
2.前置守卫,后置守卫,组件内守卫,
3.路由传参,编程时跳转是带query和param。

VUE路由组件内守卫beforeRouteEnter怎样访问this,组件内守卫有几个?

在next放行是带个vm参数,3个beforeRouteUpdate (2.2版本新增)。

VUE组件通信?

VUE v-if和v-show的区别

v-if: dom消失display:none的效果
v-show: dom不消失,影藏

VUE 父组件直接v-if="this.$refs.child"会出现什么效果?

无法获取到子组件的属性,最好使用this.$nextTick异步加载

this.$nextTick实现原理

这里就涉及到 Vue 一个很重要的概念:异步更新队列(JS运行机制 、 事件循环)。
Vue 在观察到数据变化时并不是直接更新 DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。
在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。
然后,在下一个事件循环 tick 中,Vue 刷新队列并执行实际(已去重的)工作。
所以如果用 for 循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,是一个很大的开销,损耗性能。

JS 事件循环(eventLoop)

1.JavaScript是单线程,非阻塞的
2.浏览器的事件循环
3.执行栈和事件队列
4.宏任务和微任务
5.node环境下的事件循环
和浏览器环境有何不同
事件循环模型
宏任务和微任务

深入了解eventLoop: https://www.ruanyifeng.com/blog/2014/10/event-loop.html

VUE简单的我就不描述了,希望对你们的面试有所帮助, js 把对象和数组,面向对象,深浅拷贝,原先和wepack 的AMD和commonJS熟悉。

小程序

react

混合开发,

这里简单描述,一般公司都会优先使用H5页面,优点呢快,不用再HBuildex 里面打包发布,走的都是域名模式C2B模式,
如何搭出安卓apk文件,ios ipa 文件。
1.借助工具phoneGap,uni-app等等。
2.要安卓证书和ios证书。
3.在HBuilder 选择原生app 打包,可下载5次。在蒲公英发布一下包。
4.要是发布应用到商城里面则需要生产包对接华为应用商城,小米应用商城,vivo应用商城。等等。
5.借助原生H5api解决一些权限,当然用的uni-app帮你包装过了只需要在json里面传入key值。
6.建议在云服务器一条龙服务,自己搭建的服务器,前段压力会很大。

如何优化你自己的项目?

1.去除冗余代码。压缩插件用起来
2.图片压缩,对一些不重要的小型图片可在压缩一次。
3.介绍CDN转发,将一些引用外部js的copy到本地。
4.图标字库尽量保持2-3兆如果超过可不使用。
5.注释console和debugger。

我会持续更新,希望可以对大家有用。

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

推荐阅读更多精彩内容