前端面试准备

1为什么没有在实习公司转正？

比如：实习公司很不错给了我很宝贵的工作经历，但是就我个人的职业规划来说，实习公司给到我的岗位的发展前景我并不满意。其次实习公司做的内容也比较单一 ，然后公司氛围比较沉闷吧，所以想换一家公司学习更广泛的东西，然后同时体验不一样的公司氛围。

2实习对于你最大的收获

学到了企业开发的整个流程 有了大型项目的经验，同时提升了自己的沟通能力和团队协作能力

3WebSocket在项目中的应用场景, 为什么选择WebSocket, WebSocket与HTTP对比的优缺点

websocket 协议概述
Webscoket是Web浏览器和服务器之间的一种全双工通信协议，其中WebSocket协议由IETF定为标准，WebSocket API由W3C定为标准。一旦Web客户端与服务器建立起连接，之后的全部数据通信都通过这个连接进行。通信过程中，可互相发送JSON、XML、HTML或图片等任意格式的数据。

WebSocket与HTTP协议的异同
相同点主要有：都是基于TCP的应用层协议；都使用Request/Response模型进行连接的建立；
在连接的建立过程中对错误的处理方式相同，在这个阶段WS可能返回和HTTP相同的返回码；
都可以在网络中传输数据。
不同点：WS使用HTTP来建立连接，但是定义了一系列新的header域，这些域在HTTP中并不会使用；WS是HTML5中的协议，支持持久连接；而Http协议不支持持久连接。
WS的连接不能通过中间人来转发，它必须是一个直接连接；
WS连接建立之后，通信双方都可以在任何时刻向另一方发送数据；
WS连接建立之后，数据的传输使用帧来传递，不再需要Request消息；
WS的数据帧有序。
Websocket优点：Websocket协议相比http优势很明显，首先在效率上有多方面的提升。

传统的http请求，其并发能力都是依赖同时发起多个TCP连接访问服务器实现的(因此并发数受限于浏览器允许的并发连接数)，而websocket则允许我们在一条ws连接上同时并发多个请求，即在A请求发出后A响应还未到达，就可以继续发出B请求。由于TCP的慢启动特性（新连接速度上来是需要时间的），以及连接本身的握手损耗，都使得websocket协议的这一特性有很大的效率提升。
http协议的头部太大，且每个请求携带的几百上千字节的头部大部分是重复的，很多时候可能响应都远没有请求中的header空间大。如此多无效的内容传递是因为无法利用上一条请求内容，websocket则因为复用长连接而没有这一问题。
websocket支持服务器推送消息，这带来了及时消息通知的更好体验，也是ajax请求无法达到的。
Websocket缺点
服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一，websocket 是长连接，受网络限制比较大，需要处理好重连，比如用户进电梯或电信用户打个电话网断了，这时候就需要重连
Websocket的作用
解决了传统轮询(Traditional Polling)、长轮询(Long Polling)带来的问题（服务端负载、延迟等）。Websocket应用场景
websocket在实时通信领域运用的比较多，比如社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景。
WebSocket常用的事件, 不同环境下前端使用WebSocket的区别, 比如原生JS、Vue、小程序等

3，介绍一下你对于Vue的理解

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架。Vue在构建用户界面时，能够：

编写结构：vue提供指令、数据驱动视图构建页面的结构，

美化样式：基础css样式即可美化，

处理交互：基于vue提供的事件绑定，可轻松处理用户和界面之间的交互行为

vue的核心特性：
数据驱动（MVVM）：mvvm表示的是Model-View-ViewModel,viewmodel用来连接Model和View，是Model和View之间的桥梁

组件化：相当于把一个页面分为几块部分，能够降低系统的耦合度，提高可维护性，调试方便

• 降低整个系统的耦合度——低耦合。可以在保持接口不变的情况下，替换不同的组件来快速完成需求；
• 调试方便。出现问题可以移除组件来排除问题；
• 提高维护性。由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。

指令系统：熟悉一些常见的指令

• 条件渲染指令：v-if；
• 列表渲染指令：v-for；
• 属性绑定指令：v-bind；
• 事件绑定指令：v-on；
• 双向数据绑定指令：v-model。

vue和传统开发模式的区别：

vue所有的界面事件，都是只去操作数据的，而像jquery是用来操作DOM;

vue所有界面的变动，都是根据数据自动绑定出来的，jquery操作DOM

4.Vue和React对比
相同点：都有组件化的思想，都支持服务器端渲染，数据驱动视图
都有支持native的方案：Vue的weex、React的React native
都有自己的构建工具：Vue的vue-cli、React的Create React App
区别：数据流向不同。react从诞生开始就推崇单向数据流，而vue是双向数据流；
数据变化的实现原理不同。react使用的是不可变数据，而vue使用的是可变数据；
组件化通信的不同。react中我们通过使用回调函数来进行通信，vue是父子、兄弟之间的事件和回调函数；diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM。

5.Vue双向绑定的实现原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，

Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。js通过Object.defineProperty方法简单的实现双向绑定

Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式。数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图

总之就是，在创建Vue实例的时候给传入的data进行数据劫持，同时视图编译的时候，对于使用到data中数据的地方进行创建Watcher对象，然后在数据劫持的getter中添加到发布者对象中，当劫持到数据发生变化的时候，就通过发布订阅模式以回调函数的方式通知所有观察者操作DOM进行更新，从而实现数据的双向绑定。

6.为什么Vue3要重构双向绑定的原理

vue3为什么要用proxy实现双向绑定？
1.object.defineProperty的缺点：
因为es5的object.defineProperty无法监听对象属性的删除和添加
不能监听数组的变化，除了push/pop/shift/unshift/splice/spObject.definert/reverse，其他都不行
Object.defineProperty只能遍历对象属性直接修改(需要深拷贝进行修改)
2.proxy的优点：
>1、直接监听对象而非属性
>2、直接监听数组的变化
>3、拦截的方式有很多种(有13种，set,get,has)
>4、Proxy返回一个新对象，可以操作新对象达到目的
3.proxy的缺点：
1、 proxy有兼容性问题，不能用polyfill来兼容（polyfill主要抚平不同浏览器之间对js实现的差异）
 

7.你认为Vue3优于Vue2的地方是什么

1、更小
引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了；
2、更友好
vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力；
3.proxy替换了之前的defineProperty

4.性能提升，运行速度事vue2.x的1.5倍左右
5.体积更小，按需编译体积比vue2.x要更小
6.类型推断，更好的支持Ts（typescript）这个也是趋势
7.高级给予，暴露了更底层的API和提供更先进的内置组件
8.组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑
9.是否用过Echarts, Echarts如何持续更新数据
10.关于git的问题, git rebase的作用
11.你是如何处理异步的, 为什么JS会存在异步问题
12.在你自己写项目的时候, 遇到的最大的解决, 如何解决

酷家乐面试经验

拼多多和酷家乐面试经历总结 - 掘金

酷家乐前端三面面经_笔经面经_牛客网

 前端-酷家乐一面_牛客博客

 酷家乐前端面经 (一二三面均通过 base杭州)_笔经面经_牛客网