就在前两个月，我离职换到了另一家公司。这里总结一下在面试期间被问到的一个面试题，题不难，问的也比较浅显，如果能在您面试的时候有所帮助，那就再好不过了！
1、前后端交互，如何处理加密解密的问题？
答：前端的话主要使用crypto-js 可以单独引用所需要的加密方式的js文件，也可引入整个js需求都是加密可逆的，具有一定安全性所以使用DES或者AES。其中key和iv是可以更换的，但切记前后端需要让加解密的key和iv保持一致。
2、get请求和post请求的区别？
答：1.get 是向服务器(指定资源)请求数据，post是向服务器提交要被处理的数据；2.get 在Url上传递参数，post不添加参数；3.get 刷新无害，会被缓存 ，但post数据会被重新提交不会缓存。
3、跨域如何解决？
答：跨域，是由浏览器的同源策略引起的，作用是在页面请求的地址必须与页面url地址处于同域上。产生的问题：静态资源放在本地，访问这些资源通常运用ip或者localhosts 与服务器上的域名不相同，不能顺利调试接口。
解决方法：
——依赖后端——
1、JSONP：利用jsonp标签可跨的特点，在跨域脚本中可直接回调当前的函数，通常是减轻web服务器的压负载，把css html js 等静态资源分离到另一个独立域名的服务器上。在html页面上通过标签从不同域名中获取资源。通常通过动态创建script，再请求一个代参网站实现跨域通信。缺点 ：只能实现get请求。
2、CORS 跨域资源共享:服务器设置HTTP响应中Access-Control-Allow-Origin值，解除跨域限制。
——前端独立处理——
代理或反向代理。
代理：是存在于客户端和目标服务器的一种服务器。 我们用A----B----C的格式可以更好的理解数据请求：浏览器---》代理服务器---》目标服务器，反之返回。
例如：大佬--小弟---饭店
反向代理： 浏览器---》【反向代理服务器---》处理复杂数据的服务器】
大佬---》【服务员---》厨师】饭店（同一家店相当于同一个pc端）
nginx 反向代理接口跨域，
前端代理在vue 中主要是通过vue脚手架中的config 中的index 文件来配置的，其中有个 proxyTable(铺rua可see) 来配置跨域的
总结：简单的跨域请求jsonp即可，复杂的使用Cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便。
4、http和https的区别
答：http：明文传输，会被获取传输的参数数据，端口为80，免费。https：使用ssl加密传输协议+http协议 ，端口多为443，收费，需要申请证书。
5、Vue/React 与Jquery的区别
答：1.数据和视图分离：jquery数据和视图没有分离 混在一起的 vue和react框架对数据进行了分离、解耦；
2.数据驱动视图：jquery操作真实的dom 通过监听dom元素 对视图发生变化，只关心数据的变化 dom操作被封装；
3.插件库和组件库的区别；
4.vue主要是通过组件化和数据驱动 很少操作dom vue可以通过$ref操作dom。
6、 Vue 九个性能优化技巧
答：1.函数式组件：只处理状态和行为，不会渲染任何html文本的组件。
2.子组件拆分：vue的更新是组件式，每一帧都通过修改数据导致组件发生了变化 ，子组件里面没有任何响应式组件的变化，所以不会每次都执行子组件的更新。
3.局部变量：this.base 是响应式对象，每次访问都会触发它的getter ，从需求上来this.base执行一次依赖收集就够了，求值结果返回给base 后续访问base就不会触发 getter，就不会走依赖收集，性能就会得到提升。
4.v-show复用Dom，v-if 不断的删除和创建dom，v-show控制dom的显影，v-show会将所有分支内部的组件都渲染，对应的生命周期都会执行，v-if 没有命中的分支内部的组件不会渲染，对应的生命周期不会执行。
5.keepAlive 缓存dom。
7、computed和method watch区别
答：watch：它的作用是为了监听某个响应数据的变化。computed：自动监听依赖值的发生，变化就会动态返回新值，有缓存，主要作用是简化模板内的复杂运算。 用法：需要动态赋值就使用computed ，需要知道值改变后执行业务逻辑，建议使用watch来监听数据变化；methods: 只要发生渲染，methods就会执行该函数，可以接收参数。
8、delete和Vue.delete区别
答：delete删除的位置，变为了undefined 其他键值不变；vue.delete 删除了位置 改变了数组的键值。
9、组件渲染成dom的过程
答：虚拟dom实现原理，是对真实dom的抽象，状态变更时，记录新树和旧树的差异 ，最后把差异更新到真实dom上。
具体步骤分为3点，1.编译组件中template包含的内容得到Render函数；2.渲染数据过程中，执行Render函数，读取data里面的属性（值）生成虚拟dom，包含页面结构和数据信息；3.在通过patch函数修改实际浏览器中的dom，最终完成渲染页面中事件逻辑修改了data——数据发生变化——vue重新执行Render函数——得到一个新的虚拟dom——传到patch函数中——进行二次比对——根据diff算法更新视图。
10、浅谈display、visibility和opacity的区别
display: none
1.DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
2.事件监听：无法进行 DOM 事件监听；
3.性能：动态改变此属性时会引起重排，性能较差；
4.继承：不会被子元素继承，毕竟子类也不会被渲染；
5.transition：transition 不支持 display。
visibility: hidden
1.DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
2.事件监听：无法进行 DOM 事件监听；
3.性 能：动态改变此属性时会引起重绘，性能较高；
4.继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
5.transition：transition 支持 visibility。
opacity: 0
1.DOM 结构：透明度为 100%，元素隐藏，占据空间；
2.事件监听：可以进行 DOM 事件监听；
3.性 能：提升为合成层，不会触发重绘，性能较高；
4.继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
5.transition：transition 支持 opacity。
进入新公司后，工作变得单一且繁忙了起来，没有时间学习新的东西。当然，温故而知新，也会时常总结自己的笔记之类的东西，面试的路上会遇到各种问题，善总结，多动手 一步一步来。最近在看历史剧《觉醒时代》，了解下中国近代史文化改革，颇有体会，后续会分享下自己的感后感。
网友评论