滴滴

5月20日

面试部门：杭州某部门

一面

面试形式：视频面试

面试时长：50分钟

面试感悟：面试官给人的感觉...唔...人畜无害？哈哈哈，很和蔼。但是问的问题都很有规律，比如问完项目，就说我看你会用Vue，接下来我问点Vue相关的吧，然后就是双向绑定原理、nextTick原理、虚拟DOM等等；之后又问了HTTP相关。最后他也说了他们现在也是做这种动态表单相关的项目，所以看看我们之前是怎样设计的...自我感觉滴滴面的还是挺好的，但是没有了后续...之后拖内推的老哥帮忙打听原因，那边也没有回复...仔细想了一下，可能还是项目不够硬吧，因为对比来说亮点还不够闪亮。

说一下你们的第一个项目

说一下你们的UI组件库

动态表格的实现

动态表格由两部分组成：

一个是上面的索引内容(搜索条件)，索引内容因为和动态表单很像，又有输入框，又有下拉框，所以上面的索引我也是基于动态表单UI组件库进行开发的
二是下面具体的表格查询的内容，这个是基于Ant Design of Vue中的Table进行封装的，它的结构其实很简单，只要传入需要的表头字段列表，也就是columns，还有具体的数据进去就能显示出表格。不过这里因为表头字段的数量不确定，所以可能需要用到Vue的计算属性来进行一个计算，例如如果表头字段的数量是小于8的话则表格的x方向不需要滚动，否则整个x方向的长度就为数量 X 105px类似这样的值。以及还有涉及到是否分页，每个字段的排序呀等操作。

如果有一个组件需要和前面的组件相关联你会怎么做

我主要是提供三种做法：

类似于省份城市这种关联的情况我是有专门为它们定制一个组件的
类似于行业/职业这种不确定有几层的情况我也有专门为它们定制一个组件，当每次选择了前一个下拉框中的选项之后更加选项的内容动态生成一个新的下拉框
与后台配合，如果后一个子组件和前面一个相关联的话，在选择了前一个组件之后发送请求给后台，后台返回你需要改动的子组件的信息，然后前端再进行更新
每种子组件都会有一个回调事件，可以在业务代码中判断是哪个子组件发起的事件，然后根据这个来判断。

说一下你们的工作流

说一下你在项目中碰到的难点

Vue的双向绑定原理

Object.defineProperty()有什么缺点？Vue3为什么用Proxy?

nextTick实现原理

nextTick中的waiting是什么时候变为true的呢

在下次DOM更新循环结束之后

说一下虚拟DOM的作用以及实现原理

Vue3有哪些新的API或者有做哪些优化？

performance

首先在性能(performance)上有了更多的优化，一方面表现在virtual dom的生成上更快了，另外在底层还做了一些监听的缓存，也就是事件在被创建的时候会被推进一个缓存中，后续没有改变会直接取缓存。

tree-shaking

tree- shaking它表示的是在打包的时候会去除一些无用的代码。而在Vue3中对它的支持更加友好了，例如像transition、v-model、computed等功能没有用到的话，那么最后打包产生的代码就会将它们去除。也就是说，如果你的Vue项目只写了一个Hello Word的话，那么最后打包的代码中就只有一些核心的代码，如更新算法、响应式等，打包生成的文件可能就只有13.5kb。

Fragments

碎片(Fragments)，原本在Vue2.x中每个template下只能允许有一个根节点，但是在Vue3中它可以允许你有多个，用尤大大的话来说就是会将这些内容自动变为一个碎片。

再者就是对TS的支持度很好。虽然Vue3本来就是用TS写的，但是不一定要用TS。另外它也支持Class Component，不过不是第一推荐。

Component API

语法上，对模版语法是零改变的。只不过更加推荐用Component API来写JS部分。Component API它并不是语法，而是新增的API。它带来的好处一个是逻辑重用，方便我们把一些功能的部分抽离出来。另一个它相对于options来说更加集中，用options来写代码想要追寻一个变量的变化比较麻烦。

关于兼容性

目前的Vue3.beta版本是不支持IE11的，因为核心的响应式原理用到了ES6的Proxy，但是以后会去兼容IE11。后面我们在创建一个Vue项目的时候，可以选择不同的版本，支持IE11和不支持IE11的。

使用HPACK算法进行头部压缩，HTTP/2 当中废除了起始行的概念，将起始行中的请求方法、URI、状态码转换成了头字段，不过这些字段都有一个":"前缀，用来和其它请求头区分开。
使用二进制分帧解决了HTTP层面的队头阻塞，即多个请求都通过一个TCP连接并发地完成，实现多路复用。
服务器推送。服务器不再是完全被动地接收请求，响应请求，它也能新建 stream 来给客户端发送消息
新的二进制格式。HTTP/2采用二进制格式传输数据，相比于HTTP/1.1的文本格式，二进制格式具有更好的解析性和拓展性。

具体说一下HTTP/2中的多路复用

HTTP/2引入了一个二进制分帧层，客户端和服务端进行传输时，数据会先经过二进制分帧层处理，转化为一个个带有请求ID的帧，这些帧在传输完成后根据ID组合成对应的数据。

所以原本一个个完整的HTTP请求报文变成了现在的一堆乱序的二进制帧，这些二进制帧因为不存在先后顺序所以也就不会排队等待，也就没有了HTTP队头阻塞的问题。

通信双方都可以给对方发送二进制帧，这种二进制帧的双向传输的序列，就叫做流。HTTP/2在一个TCP连接上来进行多个数据帧的通信，这就是多路复用的概念。

(所谓的乱序，指的是不同 ID 的 Stream 是乱序的，但同一个 Stream ID 的帧一定是按顺序传输的。)

你认为你的优点是什么？

从领导以及同事的评价来说，都说我是一个很靠谱的人，因为我对答应的事或者分配的任务我都做到或者很好的完成，所以第一点对于工作我是比较认真负责的。
因为自己呆的团队都不大，所以很多时候自己不仅仅是前端，也会站在用户的角度去看用户在使用我们项目的时候会有哪些痛点，或者如何去做一些优化，提出一些合理的意见并最终被采纳。举几个例子：一、我们项目中在订单页面会有一个审批记录的列表，这个审批记录的列表是紧靠在页面的右侧可进行收缩折叠的。而这个东西最开始里面显示的内容会很多，比如每个阶段审批的人，时间，备注，同意还是拒绝等等信息。而我当时想的是，站在用户的角度来说，他看到这个记录的时候最关心的应该是审批的人，以及审批时间还有到了哪个阶段，而一些无关紧要的信息没必要开始就带出来。所以我当时就有一个提议：每条记录只显示出用户最关心的东西，而不重要的可以等用户鼠标移动上去的时候再进行一个显示。并且对整个审批记录做了一些精简的处理，使它不那么冗长，比如判断时间，如果是今年的话，就把2020-08-08设置为08-08。二、因为考虑到用户可能会频繁的切换某些页面，而项目中的页面菜单的层级有时候可能会比较深，不方便来回切换。我就有提议在当前页面的顶部实现一个导航栏，每当进入一个新的页面的时候，导航栏就会新增一个标签，记录当前页面，这样相当于留了一个快捷的入口给用户，方便他们进行页面的切换，同时导航栏也会有例如删除左侧的全部标签，删除右侧，只保留当前页等功能。
我是一个比较喜欢总结和分享的人，所以在工作之余也会经常写博客，目前的更新频率是会保持每周有一篇比较高质量的文章。也一直保持着自己对前端的这份热情。

滴滴