vue scoped的作用是什么? 如何更改element-ui样式?
CSS,VUE中<style scoped> scoped不污染其他组件, /deep/的底层原理: 打包的时候会生成一个独一无二[ha、sh]值。作用是穿透。
前段解决跨域方案?
- 通过jsonp跨域。
2.document.domain + iframe跨域。
3.location.hash + iframe。 - 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。