# 风变科技面试总结 – 2020 年 6 月 15 日

- Link: https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/
- Published: 2020-06-15T22:29:15+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#)

 * [风变科技详情](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#%e9%a3%8e%e5%8f%98%e7%a7%91%e6%8a%80%e8%af%a6%e6%83%85)
 * [总体描述](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#%e6%80%bb%e4%bd%93%e6%8f%8f%e8%bf%b0)
 * [技术面](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#%e6%8a%80%e6%9c%af%e9%9d%a2)
    - [1. 后端模板引擎在 2020 年的时间节点中，他的存在有什么意义？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#1_%e5%90%8e%e7%ab%af%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8e%e5%9c%a8_2020_%e5%b9%b4%e7%9a%84%e6%97%b6%e9%97%b4%e8%8a%82%e7%82%b9%e4%b8%ad%ef%bc%8c%e4%bb%96%e7%9a%84%e5%ad%98%e5%9c%a8%e6%9c%89%e4%bb%80%e4%b9%88%e6%84%8f%e4%b9%89%ef%bc%9f)
    - [2. 你搞过 SSR 么？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#2_%e4%bd%a0%e6%90%9e%e8%bf%87_ssr_%e4%b9%88%ef%bc%9f)
    - [3. 你为什么会在你自己的项目中配置 CI & CD？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#3_%e4%bd%a0%e4%b8%ba%e4%bb%80%e4%b9%88%e4%bc%9a%e5%9c%a8%e4%bd%a0%e8%87%aa%e5%b7%b1%e7%9a%84%e9%a1%b9%e7%9b%ae%e4%b8%ad%e9%85%8d%e7%bd%ae_ci_cd%ef%bc%9f)
    - [4. Vue 的单文件组件的 Data 为什么是一个函数，返回一个 Object，而不是直接返回 Object？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#4_vue_%e7%9a%84%e5%8d%95%e6%96%87%e4%bb%b6%e7%bb%84%e4%bb%b6%e7%9a%84_data_%e4%b8%ba%e4%bb%80%e4%b9%88%e6%98%af%e4%b8%80%e4%b8%aa%e5%87%bd%e6%95%b0%ef%bc%8c%e8%bf%94%e5%9b%9e%e4%b8%80%e4%b8%aa_object%ef%bc%8c%e8%80%8c%e4%b8%8d%e6%98%af%e7%9b%b4%e6%8e%a5%e8%bf%94%e5%9b%9e_object%ef%bc%9f)
    - [5. 当一个父组件和子组件中的 Mounted 都加入一个 console.log 的时候，哪个会先打印出来？为什么？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#5_%e5%bd%93%e4%b8%80%e4%b8%aa%e7%88%b6%e7%bb%84%e4%bb%b6%e5%92%8c%e5%ad%90%e7%bb%84%e4%bb%b6%e4%b8%ad%e7%9a%84_mounted_%e9%83%bd%e5%8a%a0%e5%85%a5%e4%b8%80%e4%b8%aa_consolelog_%e7%9a%84%e6%97%b6%e5%80%99%ef%bc%8c%e5%93%aa%e4%b8%aa%e4%bc%9a%e5%85%88%e6%89%93%e5%8d%b0%e5%87%ba%e6%9d%a5%ef%bc%9f%e4%b8%ba%e4%bb%80%e4%b9%88%ef%bc%9f)
    - [6. Vue 的函数式组件如何使用](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#6_vue_%e7%9a%84%e5%87%bd%e6%95%b0%e5%bc%8f%e7%bb%84%e4%bb%b6%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8)
    - [7. Vue 如何做 Diff 的](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#7_vue_%e5%a6%82%e4%bd%95%e5%81%9a_diff_%e7%9a%84)
    - [8. v-if 和 v-show 的区别是什么？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#8_v-if_%e5%92%8c_v-show_%e7%9a%84%e5%8c%ba%e5%88%ab%e6%98%af%e4%bb%80%e4%b9%88%ef%bc%9f)
    - [9. 如果对 Vue 单文件组件的空 Object 进行操作，会触发更新么？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#9_%e5%a6%82%e6%9e%9c%e5%af%b9_vue_%e5%8d%95%e6%96%87%e4%bb%b6%e7%bb%84%e4%bb%b6%e7%9a%84%e7%a9%ba_object_%e8%bf%9b%e8%a1%8c%e6%93%8d%e4%bd%9c%ef%bc%8c%e4%bc%9a%e8%a7%a6%e5%8f%91%e6%9b%b4%e6%96%b0%e4%b9%88%ef%bc%9f)
    - [10.关于 Web Socket 的原理](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#10%e5%85%b3%e4%ba%8e_web_socket_%e7%9a%84%e5%8e%9f%e7%90%86)
    - [11. Node.js 中的双工模式](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#11_nodejs_%e4%b8%ad%e7%9a%84%e5%8f%8c%e5%b7%a5%e6%a8%a1%e5%bc%8f)
    - [12. 僵尸进程与孤儿进程](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#12_%e5%83%b5%e5%b0%b8%e8%bf%9b%e7%a8%8b%e4%b8%8e%e5%ad%a4%e5%84%bf%e8%bf%9b%e7%a8%8b)
    - [13. Git 的 Merge 和 squash merge 的区别是什么](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#13_git_%e7%9a%84_merge_%e5%92%8c_squash_merge_%e7%9a%84%e5%8c%ba%e5%88%ab%e6%98%af%e4%bb%80%e4%b9%88)
    - [13. Node.js 的流（Stream）](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#13_nodejs_%e7%9a%84%e6%b5%81%ef%bc%88stream%ef%bc%89)
    - [14. Egg.js 为什么没有用 Pm2，而是自己实现了守护进程？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#14_eggjs_%e4%b8%ba%e4%bb%80%e4%b9%88%e6%b2%a1%e6%9c%89%e7%94%a8_pm2%ef%bc%8c%e8%80%8c%e6%98%af%e8%87%aa%e5%b7%b1%e5%ae%9e%e7%8e%b0%e4%ba%86%e5%ae%88%e6%8a%a4%e8%bf%9b%e7%a8%8b%ef%bc%9f)
    - [15. 如何平衡工作时间和 Side Project 的时间？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#15_%e5%a6%82%e4%bd%95%e5%b9%b3%e8%a1%a1%e5%b7%a5%e4%bd%9c%e6%97%b6%e9%97%b4%e5%92%8c_side_project_%e7%9a%84%e6%97%b6%e9%97%b4%ef%bc%9f)
    - [16. 如果团队没有人分享的话，如何让他们分享？](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#16_%e5%a6%82%e6%9e%9c%e5%9b%a2%e9%98%9f%e6%b2%a1%e6%9c%89%e4%ba%ba%e5%88%86%e4%ba%ab%e7%9a%84%e8%af%9d%ef%bc%8c%e5%a6%82%e4%bd%95%e8%ae%a9%e4%bb%96%e4%bb%ac%e5%88%86%e4%ba%ab%ef%bc%9f)
 * [面试总结](https://www.ixiqin.com/2020/06/15/the-wind-changed-technology-interview-summary-june-15-2020/#%e9%9d%a2%e8%af%95%e6%80%bb%e7%bb%93)

## 风变科技详情

风变科技当前最为知名的产品是《Python小课》。

一些关于风变科技的文章

 * [关于风变科技，其创始人刘克亮的自述](https://mp.weixin.qq.com/s/nOPgvGxkHauH20dWoGjjeA)
 * [风变科技对于教育的思考](https://mp.weixin.qq.com/s/mcXDshITvUOUebOp8QVtww)

风变科技网站

 * [Python小课](https://www.pypypy.cn/#/)
 * [公司官网](https://www.forchange.cn/)

## 总体描述

我的简历应该是由他们的前端 Leader Function 提交的，因此，第一轮给我打电话的直接是
HR ，而不是一般时候我们的业务方。

## 技术面

技术面的面试官准点上线，这一点给赞。

技术面一共问了以下的一些题目

### 1. 后端模板引擎在 2020 年的时间节点中，他的存在有什么意义？

我的回答：后端模板引擎目前还存在，更多是从 SEO 的角度来看到的。当然，实际上为了 
SEO ，前端还搞出了 SSR （Server Side Render）来处理这些问题。

### 2. 你搞过 SSR 么？

我的回答：没有。

> 这里可以看出，在当前 SSR 当道的情况下，搞一搞 SSR 还是有必要的。这个我需要在后
> 续补充一下。加到 TODO 里。

### 3. 你为什么会在你自己的项目中配置 CI & CD？

我的回答：

因为我自己会觉得，CI & CD 的配置会让我能够更高效的完成自己项目的开发。

其实可以补充一些内容：

CI & CD 可以提升项目的质量，因为 CI & CD 并不是简简单单配置一个 CI & CD 就结束的。
CI 、CD 背后是项目测试完善的标志。如果没有测试，CI 和 CD 就仅仅是一个自动部署的脚本
而已，没有发挥出其最大的价值。

### 4. Vue 的单文件组件的 Data 为什么是一个函数，返回一个 Object，而不是直接返回 Object？

我的回答：

涉及到单文件组件复用的时候，可能会导致不同组件实例的数据紊乱。如果返回一个 Function，
Function 内部返回的 Object 会借助闭包机制来避免这样的问题。借助闭包机制构建诸如私有
变量的形态。

面后研究：

这部分内容被记录在 Vue 官方文档中的[组件基础页面](https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0)。

![](https://postimg.aliavv.com/mbp/vf1nu.png)

这里官方给到的描述是，**当返回的是一个函数时，会让每一个函数维护一份被返回对象独立
的拷贝**。

相关的 Vue 源码参考：[https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L112-L152](https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L112-L152)

### 5. 当一个父组件和子组件中的 Mounted 都加入一个 console.log 的时候，哪个会先打印出来？为什么？

正确答案：子组件的 console.log 会先打印出来。

这部分你可以参考实例代码 **https://codepen.io/madman0621/pen/vQyBPB/**

面后研究：

简单来说，组件会在 父组件进入 BeforeMounted 之后，进入子组件的 BeforeCreated 中

可以参考这篇文章:https://juejin.im/post/5c95ee98f265da60dd354c6c

### 6. Vue 的函数式组件如何使用

我的回答：这部分只答出了 Render 的函数和他使用 createElement 来创建 Element ，没有
回答出其他的内容。

面后研究：

可以参考 Vue 官方文档中关于渲染函数的描述

[https://cn.vuejs.org/v2/guide/render-function.html](https://cn.vuejs.org/v2/guide/render-function.html)

### 7. Vue 如何做 Diff 的

这部分没有回答上来。

面后研究

[https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0).MarkDown](https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0).MarkDown)

### 8. v-if 和 v-show 的区别是什么？

我的回答：

v-if 和 v-show 一个是在渲染的时候控制，一个是在显示的时候控制。

v-if 会带来渲染开销；v-if 会带来显示开销。可以感受自己的需要选择。

### 9. 如果对 Vue 单文件组件的空 Object 进行操作，会触发更新么？

题目大概是下面这样的含义，问是否会触发更新

    ```javascript
    new Vue({
      data:function(){
        return {}
      },
      methods:{
      onClick(){
        this.data.xxx = abc
      }
     }
    })
    Code language: JavaScript (javascript)
    ```

我回答的是不会，理由是和之前的 Vue 组件的 data 为什么是一个函数而不是一个 Object
一样的。这里使用类似闭包的机制让其来完成其数据的不互相干扰，带来的问题是，必须提前
声明才能确保相应的数据被自动生成 setter 和 getter 。

面后研究

这个问题源自 Vue 的响应式原理，具体的内容可以参考下方的内容

[https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1](https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1)

### 10.关于 Web Socket 的原理

我的回答：这里我回答了之前在做嵌入式开发时的一些经验。

后来面试官告诉我他想了解的其实是我之前写的一篇公众号文章 。我就说了一下自己的理解。

 https://www.ixiqin.com/2019/08/websocket-how-to-implement-the-server-to-the-client-
sends-the-message/

### 11. Node.js 中的双工模式

这部分我没有了解，没有回答

### 12. 僵尸进程与孤儿进程

### 13. Git 的 Merge 和 squash merge 的区别是什么

我的回答：

squash merge 的最大区别是可以将多个 commit 合并为一个commit ，我会在整个 pr 中的
commit 无意义的时候，使用 squash merge。 当 commit 有意义时，就使用 merge。

面后研究

这里还有一个问题，我没有回答上来，就是 cherry-pick 能干嘛？

这里可以看看阮一峰老师的博客：[http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html](http://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html)

### 13. Node.js 的流（Stream）

这部分我只说出了自己用过 fs 的流

面后研究

面试官的预期答案，可以参考 http://nodejs.cn/api/stream.html#stream_stream

### 14. Egg.js 为什么没有用 Pm2，而是自己实现了守护进程？

这部分我没有回答出来。只是说出了，如果你要将自己的项目改用PM2 管理时，需要去除script
中的 daemon 模式，以标准的进程模式来运行。

涉及到的页面

[https://www.eggjs.org/zh-CN/core/deployment](https://www.eggjs.org/zh-CN/core/deployment)

[https://github.com/eggjs/egg-cluster](https://github.com/eggjs/egg-cluster)

### 15. 如何平衡工作时间和 Side Project 的时间？

我说了一下自己的模式，每周五晚和每周六晚通宵搞代码

### 16. 如果团队没有人分享的话，如何让他们分享？

## 面试总结

本次面试的时长约 1 个小时，讨论的问题达到了近 20 题（实际上还有一些我记得不太清楚
的题目），可以看出，几乎在每个问题中，我都没有和面试官去往深处去讨论，这其实会为
我的面试失败埋下伏笔（写这篇文章的时候还不知道结果，暂且认为这样不太好）。

下一次面试需要优化的点包括：

 1. 对于自己常用的工具需要熟悉，比如 Vue，比如 Git
 2. 对于 Node.js 的原理还是有待深入学习