Vue.js专区让前端飞程序员

记录面试中一些回答不够好的题（Vue 居多）

2018-03-04  本文已影响155人  三毛丶

相关问题

相关解答

flex 布局 与 grid 布局

这个问题比较简单，用 flex 与 grid 实现如下即可：

image

实现方式如下：

<html>
  <head>
    <style>
      
      /* flex */
     .box {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
     }
     .box div {
        width: calc(100% / 3);
        height: 100px;
        border: 1px solid black;
     }

     /* grid */
     .box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
     }

     .box div {
        height: 100px;
        border: 1px solid black;
     }
    </style>
  <head>
  <body>
    <div class="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>  
  <body>
</html>

grid 学习：https://www.jianshu.com/p/d183265a8dad

实现 Vue SSR

一些想法写在下题。

从 SPA 使用最小成本迁移到 SSR

Vue SSR 的好处就不多说了，这有一篇相关文章 服务端渲染与客户端渲染 。
简单的总结下 Vue SSR 的实现。
有一张实现图：

image

其基本实现原理：

Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的。
纯客户端输出过程有一个 complier 过程（「下题」中有一个简单描述），主要作用是将 template 转化成 render 字符串 。
Vue SSR 需要做的事多点（输出完整 HTML），除了 complier -> vnode，还需如数据获取填充至 HTML、客户端混合（hydration）、缓存等等。

和其他模板引擎（ejs, jade 等）最终要实现的目的是一样的，性能上可能要差点。

参考：

ff 数组

实现 Promise.finally

finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作，使用方法如下：

Promise
    .then(result => { ··· })
    .catch(error => { ··· })
    .finally(() => { ··· })

finally 特点：

Promise.prototype.finally = function (callback) {
  let P = this.constructor
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  )
}

另一种方式实现 Vue 的响应式原理

Vue 的响应式原理是使用 Object.defineProperty 追踪依赖，当属性被访问或改变时通知变化。

有两个不足之处：

原因差不多，无非就是没有被 getter/setter 。
第一个比较容易理解，为什么数组长度不能被 getter/setter ？
在知乎上找了一个答案：如果你知道数组的长度，理论上是可以预先给所有的索引设置 getter/setter 的。但是一来很多场景下你不知道数组的长度，二来，如果是很大的数组，预先加 getter/setter 性能负担较大。

现在有一个替代的方案 Proxy，但这东西兼容性不好，迟早要上的。

Proxy，在目标对象之前架设一层拦截。具体，可以参考 http://es6.ruanyifeng.com/#docs/reference

Vue 组件 data 为什么必须是函数

理解两点：

Vue computed 实现

这个题目有两家问了，感觉都不是答得很好。

从两个问题出发：

实现时，主要如下

参考：https://segmentfault.com/a/1190000010408657

diff 算法实现

以前写过两篇文章讨论这个算法的实现，没想到过的太久，忘记了。（文章地址：https://github.com/jkchao/blog/issues/3 ，https://github.com/jkchao/blog/issues/4） 。
也好，称此机会总结下

diff 的实现主要通过两个方法，patchVnode 与 updateChildren 。

patchVnode 有两个参数，分别是老节点 oldVnode, 新节点 vnode 。主要分五种情况：

updateChildren 是关键，这个过程可以概括如下：

image

oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果 4 种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。

Vue complier 实现

以前写过一篇 「Vue 生面周期总结的文章 」的文章，里面提到了 complier 的作用，没有做深入了解。。。

模板解析这种事，本质是将数据转化为一段 html ，最开始出现在后端，经过各种处理吐给前端。随着各种 mv* 的兴起，模板解析交由前端处理。
总的来说，Vue complier 是将 template 转化成一个 render 字符串。
可以简单理解成以下步骤：

参考：

快排及其优化

前端对算法的要求还是比较低的，但也是必不可少的一部分。

找到一篇比较不错的文章：https://www.cnblogs.com/zichi/p/4788953.html

缓存算法实现及其优化

最简单的一种思路就是使用数组存储，然后让我优化。
我。。。一脸懵逼。
有兴趣的同学可以参考这个： http://www.cnblogs.com/dolphin0520/p/3749259.html 。

ps: 看来我得补补数据结构和算法相关的知识了。

怎么快速定位哪个组件出现性能问题

当面试官问这个问题，没有 get 到面试官的点，扯了一堆乱七八糟没用的 - -。
后来面试官说主要是用 timeline 工具。
大意是通过 timeline 来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题。

附上两个使用 timeline 的文章：

http 状态码 202, 204

面试官不知道为何扯到了 202, 204。。。好像是由自己带进坑的。- -

202: 服务器已接受请求，但尚未处理。
204: 服务器成功处理了请求，没有返回任何内容。

这些状态码感觉只要能记住常用的就 ok 了，当然还得了解 200 +, 300+, 400+, 500+ 代表什么意思。

WebSocket

WebSocket 应该算是一个比较常问的面试点，如果问的不深的话，应该比较好回答。

由于 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使用轮询，而轮询效率过低，并不适合。于是 WebSocket 被发明出来。

相比与 http 具有以下有点：

实现比较简单，服务端库如 socket.io、ws ，可以很好的帮助我们入门。而客户端也只需要参照 api 实现即可。

参考：

尽可能多的说出你对 Electron 的理解

以前写过一篇简单的关于 electron-vue 的文章，没想到真有面试官问，而且问的挺深的。

最最重要的一点，electron 实际上是一个套了 Chrome 的 node 程序。

所以应该是从两个方面说开来：

Chrome 没什么好说的，是个前端都懂。

Node 方面可说的就多了。

有个面试官问我，在 electron 怎么解决跨域问题？
在我自己的项目里，确实遇到了这个问题，可惜选择了一个不怎么好的方法的方法，设置 nginx 。
为什么不好，如果项目是公司的，还需要运维同学帮忙。- -
也聊到了使用 CORS 允许跨域，也觉得不好，因为需要后端接口处理。
一脸懵逼的我，直到面试官提醒使用 node 来代理以下，才恍然大悟。（原来还可以这种操作。。。。）

当然也可以连接数据库，上家公司本来打算要做一个 electron 配合连接数据库的桌面应用。（还没开始做就离职了- -）
挺可惜的，当时数据库都已经选择好了，leveldb 或者 lowdb ，觉得应该不难。

附上两个 electron 配合数据库使用的链接：

功力不足，难免有错误之处，还望多多指出。
更多相关，移步我的 blog https://jkchao.cn

上一篇下一篇

猜你喜欢

热点阅读