在阿裡我是如何當面試官的(含流程、注意點、面試題彙總等)

作者：子弈

https://juejin.im/post/5e6ebfa86fb9a07ca714d0ec

前言

由于疫情關系，最近在掘金看到很多同學的工作情況内心還是蠻觸動的（降薪、變相裁員、辭退等）。可能這并不是當下一個普遍的現象，但仍然使我感受到前端這碗青春飯不好混。于此同時聯系我内推的同學很多都處于待業狀态，能感受到他們内心的迷茫和焦灼。于是内心一直有聲音督促我，趕緊寫點面試相關的東西出來吧，哪怕對大家隻有一絲絲的幫助。當然這次我會以面試官的角度出發（可能不是一個優秀的面試官），讓大家更加了解阿裡的面試流程、面試資料和面試場景等。接下來我會從以下幾個子產品來講解：

招聘流程
内推資料
面試資料
面試注意點
面試題解析

溫馨提示：入職前以應聘者的角度寫了一篇面試相關的文章

需要注意不是收到内推履歷就會立即投遞，會先有一個純粹的履歷篩選過程，是以上傳履歷和履歷評估會有數量的差别。除此之外，目前還沒有遇到被 HR 拒絕的情況。當然從内推資料可以看出，其中關鍵性的面試是履歷評估和一輪技術面（通常對于應聘者而言是一面和二面）。

溫馨提示：上傳履歷會被錄入阿裡的人才庫，如果履歷不在面試流程中（或者履歷在某部門面試後被釋放），那麼其他感興趣的部門會發起新的招聘邀約。

面試資料
由于進入公司不久，一般我都是作為履歷評估的面試官，少數時候會作為一輪技術面的面試官，這裡将我作為面試官的資料整理如下：

在阿裡我是如何當面試官的(含流程、注意點、面試題彙總等)
感覺和内推資料中的履歷評估通過率相比，我在履歷評估的時候會更加謹慎......
面試注意點
在面試的過程中，我印象最深的幾點感受一定要告知大家：

1、回答問題不要過于着急，一定要耐心等待面試官把問題說完

2、回答問題要有邏輯、幹練簡潔

3、如果面試官打斷你說話，此時一定要謹慎回答，因為很有可能你回答過于繁瑣且他對你當下的回答不滿意

4、一個問題不要糾結很久.....

5、不會的面試題必須幹脆利落的說不會

6、面試的時間最好控制在 30 ~ 40 分鐘左右，這樣互相之間的體驗不會很差

7、面試是一個挖掘面試者能力和潛力的過程

8、面試官不是全能的，面試一定是一個互相學習的過程

9、一定要提前準備好自己想要問的問題，最緻命的是别人把你安排的明明白白結果你對别人一無所知.....

關于第 2 點還是要說明一下，很多面試者回答問題沒有邏輯性，在回答之前可以先思考一下，然後告訴面試官将從 n 個方面進行講解，首先第 1 個方面是...，其次第 2 個方面是...
溫馨提示：面試的時候發現大部分的面試者普遍存在 1 和 2 兩個問題。如果你的回答沒有邏輯還繁瑣且沒有命中要點，通常面試官對你的印象會非常差。相反，如果你回答問題過于簡潔，通常情況下面試官會覺得你沒 Get 到他的問題點（當然會懷疑自己的表述有沒有問題），一般都會追加更詳細的問題描述。

面試題解析
一般在面試開始前，我會根據應聘者的履歷提前準備 8 道左右的面試題（在面試的過程中可能會有調整），最終分析了一下筆試題資料如下：

在阿裡我是如何當面試官的(含流程、注意點、面試題彙總等)

溫馨提示：這資料不包括追加的面試題，是提前為應聘者準備的面試題資料。在真正的面試中，面試題可能會因為政策和現場面試情況進行臨時調整和追加。
由于本身對 React 熟悉還不夠，是以我遇到應聘者如果是 React 技術棧會相對吃虧一些。接下來我會重點講解一些面試題，有些簡單的面試題不會出解答思路（有些面試題可從《面試分享：兩年工作經驗成功面試阿裡 P6 總結》中找到答案），沒有給出答案的面試題希望大家在評論中給出，供别人參考。
HTML 篇

在 HTML 中如何做 SEO 優化？

建設中...

首屏和白屏時間如何計算？

參考連結

w3c / web-performance

Navigation Timing Level 2

w3c / navigation-timing

CSS 篇

了解 Flex 布局麼？平常有使用 Flex 進行布局麼？

解題思路

首先得說出 Flex 布局概念，Flex 的結構組成（Flex Container 、Flex Item），遇到的所有面試者都沒有此回答

其次可以講講自己平常用的最多的 Flex 屬性

最後可以講講自己平時常用的布局（左右兩列，上下兩行等）

參考連結

Flex 布局教程：文法篇

CSS 中解決浮動中高度塌陷的方案有哪些？

解題思路

可以先概括解決高度塌陷問題的兩種類型： clear 屬性和 BFC 法

然後可以介紹兩種類型的具體方案：

追加元素并設定 clear 屬性

使用 CSS 樣式插入僞元素

Bootstrap 的解決高度塌陷方案（BFC）

可能追加的面試題（詳見參考連結）

高度塌陷産生的原因是什麼？

clear 屬性清除浮動的原理是什麼？

采用 BFC 解決高度塌陷和 clear 屬性清除浮動相比的優勢是什麼？

參考連結

清除和去除浮動

Flex 如何實作上下兩行，上行高度自适應，下行高度 200px？

解題思路

flex-direction: column

flex: 1

如何設計一個 4 列等寬布局，各列之間的邊距是 10px（考慮浏覽器的相容性）？

解題思路

浮動和清除浮動

margin 負值的作用（可參考 Bootstrap 3 中栅格容器 .container 的樣式）
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>


    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      
      .container {
        margin-right: -10px;
      }
      
      .row {
        box-sizing: border-box;
        padding-right: 10px;
        width: 25%;
        height: 100px;
        float: left;
      }


      .container::before {
        display: table;
        content: '';
      }


      .container::after {
        display: table;
        content: '';
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">第一列</div>
      <div class="row">第二列</div>
      <div class="row">第三列</div>
      <div class="row">第四列</div>
    </div>
  </body>
</html>
           
可能追加的面試題

如果你回答的是 Table 布局，那一定會追問 Table 布局和 Div 布局有什麼差別？

CSS 如何實作三列布局，左側和右側固定寬度，中間自适應寬度？

CSS 清除浮動的原理是什麼？

解題思路

利用清除可以設定元素禁止浮動元素出現在它的左側、右側甚至是雙側。
<style>
div {
display: inline-block;
width: 40%;
height: 100px;
background: #d3cff7;
margin-right: 10px;
margin-bottom : 0;
padding: 0;
}


.float {
float: left;
}


.box {
height: 50px;
}
p {
border: 1px solid black;
margin:0;
padding:0;
width: 80%;
}
</style>


<div class="float"></div>
<div class="box"></div>
<p>3333333333333333333333333333333333333333333</p>
           
1

2

3333333333333333333333333333333333333333333

由于 div1 浮動，p 和 div1 布局重疊，為了解決這個問題，可以使 p 元素左側不允許有浮動元素，給 p 元素添加一個 clear:left 的樣式之後

1

2

3333333333333333333333333333333333333333333

可以發現 p 的位置下移進而使 p 和 div1 布局不會重疊，其實是使用清除之後，自動增加了 p 元素的上外邊距，確定它落在浮動元素 div1 的下面。CSS2.1 引入了清除區域的概念，清除區域是在元素上外邊距之上增加的額外間隔（確定浮動元素不會與該元素重疊），不允許浮動元素進入這個範圍，意味着設定 clear 屬性的 p 元素的外邊距并不改變，之是以該元素會向下移動是因為清除區域造成的。div1 和 div2 的高度分别是 100px 和 50px，是以清除區域的高度在 50px 左右（不算 border 和浏覽器代理初始樣式等）。如果給 p 元素一個上外邊距 margin-top:30px，則 p 元素并不會向下移動 30px，而是在解析完樣式之後清除區域的高度變成了 50px - 30px 左右，而 p 元素仍然位置不變，如果要使 p 元素下移，則需要使 p 元素的 margin-top 值高于最大的清除區域高度 50px，并且向下位移的距離也是 margin-top 值減去最大的清除區域高度。

BFF 的作用有哪些？

參考連結

《面試分享：兩年工作經驗成功面試阿裡 P6 總結》

CSS 中的 background 的 background-image 屬性可以和 background-color 屬性一起生效麼？

可能追加的面試題

background-color 屬性可以覆寫 background-image 屬性嗎？

了解 CSS 3 動畫的硬體加速麼？在重繪和重流方面有什麼需要注意的點？

參考連結

《面試分享：兩年工作經驗成功面試阿裡 P6 總結》

比較一下 TypeScript 和 JavaScript，在什麼情況下你覺得需要 TypeScript ?

在 JavaScript 中如何實作對象的私有屬性?

async / await 和 Promise 的差別?

解題思路：

await 會等待異步代碼執行，會阻塞代碼（使用時要考慮性能）

async / await 在調試方面會更加友善

在 JavaScript 可以有哪幾種形式實作繼承，各有什麼優缺點？

解題思路

類型優缺點

構造函數模式可以建立不同執行個體屬性的副本，包括引用類型的執行個體屬性，但是不能共享方法

原型模式引用類型的屬性對于執行個體對象而言共享同一個實體空間，是以可以共享方法

原型鍊對父類實作方法和屬性繼承的過程中，父類執行個體對象的引用類型屬性在子類的執行個體中共享同一個實體空間，因為父類的執行個體對象指向了子類的原型對象

借用構造函數解決了繼承中的引用值類型共享實體空間的問題，但是沒法實作方法的共享

組合繼承屬性的繼承使用借用構造函數方法，方法的繼承使用原型鍊技術，即解決了引用值類型共享的問題，又實作了方法的共享，但是子類的原型對象中還存在父類執行個體對象的執行個體屬性

寄生組合繼承組合繼承已經可以解決大部分問題，但是也有缺陷，就是會調用兩次父類的構造函數，一次是實作原型時使子類的原型等于父類的執行個體對象調用了父類構造函數（同時在子類的原型對象中還存在了父類執行個體對象的執行個體屬性），一次是使用子類構造函數時調用了一次父類構造函數。寄生組合式繼承可以解決在繼承的過程中子類的原型對象中還存在父類執行個體對象的執行個體屬性的問題。

參考連結

JavaScript 中的類和繼承（https://github.com/ziyi2/js/blob/master/JS%E7%B1%BB%E5%92%8C%E7%BB%A7%E6%89%BF.md）

React 篇

React 中的 setState 為什麼需要異步操作？

解題思路

保持内部一緻性： props 的更新是異步的，因為 re-render 父元件的時候，傳入子元件的 props 才變化；為了保持資料一緻， state 也不直接更新，都是在 flush 的時候更新

将 state 的更新延緩到最後批量合并再去渲染對于應用的性能優化是有極大好處的，如果每次的狀态改變都去重新渲染真實 DONM，那麼它将帶來巨大的性能消耗

立即更新回來視覺上的不适應，比如在頁面打開時候，多個請求釋出導緻頻繁更改Loading 狀态，會導緻 Loading 圖示閃爍

可能追加的面試題

什麼時候 setState 會進行同步操作？

React 官方對于 setState 特定情況下進行同步操作的優化方案是什麼？

React 中 setState 後想要拿到更新的 state 值應該怎麼處理？

參考連結

Does React keep the order for state updates?

why is setState asynchronous?

unstable_batchedUpdates

React 應用如何在重新加載頁面時保留資料？

解題思路

localStorage 結合 Redux

url query （注意長度限制）

使用 React Hooks 的同時為什麼需要使用高階元件？

面試題來源

履歷中寫着使用 Hooks 結合高階元件完成業務開發

解題思路

反向入坑問題，如果是業務遷移可以說明進行部分改造遷移導緻

正向說明 Reat Hooks 中不需要高階元件的寫法，例如 Redux 舉例

自定義 Hook

可能追加的面試題

完全用 Hooks 的寫法是否可以摒棄高階元件的寫法？

怎麼使用 Hooks 替代高階元件？

參考連結

自定義 Hook（https://zh-hans.reactjs.org/docs/hooks-custom.html）

Ajax 請求放在 componentDidMount 裡進行處理還是放在 componentWillMount 裡進行處理比較合适？

解題思路

服務端渲染

Event Loop

gaearon ：If it's an async request, it won't be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can't "come back" and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.

You're right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.

The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.

JS 是單線程，Ajax 請求不會 "傳回" 并且觸發當我們正在 rendering 的時候（Ajax 的執行結果會放到任務隊列中，等主線程執行完後采取讀取任務隊列中的任務進行執行），因為理論上放在哪裡結果都一樣，都會執行兩次 render。

這樣的話，就沒必要在
componentWillMount 中調用 Ajax，以避免了解不到位，對state的結果預計錯誤。 componentDidMount 的執行很明了，不會引起歧義，是以在 componentDidMount
中最合理了。

可能追加的面試題

說說 React 官方推薦 Ajax 請求放在 componentDidMount 裡進行處理，而不是放在 componentWillMount 裡進行處理？

如果 Ajax 請求放在 componentWillMount 裡進行處理，且 Ajax 的傳回結果在 render 之前，那麼最終會執行幾次 render ?

參考連結

Explain why componentDidMount is a better place to make an ajax request（https://github.com/reactjs/reactjs.org/issues/302）（Open）

React 在文法層面可以做哪些性能優化？

解題思路

PureComponent + Redux + immutable-js / immutability-helper

Redux -> Redux Toolkit

元件庫按需加載

動态 Ployfill

Tree Shaking

路由懶加載

Hooks useCallback

React Fragments

建構函數中的事件 bind 處理

避免使用内聯樣式屬性

JSX 中合理控制條件渲染的範圍（避免無謂的重複渲染）

key

保持 state 中資料必響應的特性

可能追加的面試題

深比較和淺比較的差別是什麼？

平常在 render 時有哪些需要注意的地方？

React 和 Vue 的差別？

架構 React Vue 2.x

類型 MVVM MVVM

響應式 √ √

元件化 √ √

腳手架 Create React App Vue CLI

路由 react-router vue-router

狀态管理 react-redux / React Hooks / MobX vuex

整體思路函數式、單向資料流聲明式、表單雙向綁定

元件優化 PureComponent / shouldComponentUpdate 可了解為自動化 shouldComponentUpdate

HTML JSX (結構 & 表現 & 行為融合、完整的 JavaScript / TypeScript 文法支援、先進的開發工具 Lint / 編輯器 Auto 等) Template（結構 & 表現 & 行為分離、HTML 更友好、開發效率提升、文檔學習成本） / JSX

CSS CSS 作用域需要額外實作，例如一些 CSS-in-JS 方案（styled-components、styled-jsx），一般需要額外的插件支援文法高亮和提示單檔案元件 Style 标簽

Chrome 開發工具 react-devtools vue-devtools

優勢大規模應用程式的魯棒性（靈活的結構和可擴充性）、适用原生 App、豐富的生态圈、豐富的工具鍊一站式解決方案、更快的渲染速度和更小的體積

除此之外，在文法層面：

在複用層面 React 可通過高階函數、自定義 Hooks 實作。而 Vue 在大部分情況下使用 Mixin。

Vue 的元件執行個體有實作自定義事件，父子元件通信可以更解耦。React 萬物皆 Props 或者自己實作類似的自定義事件。

Vue 中可以使用插槽 Slot 分發内容，React 萬物皆 Props。

Vue 中豐富的指令（确實好用，還支援靈活的自定義指令），React 萬物皆 JSX。

Vue 中的計算屬性和偵聽屬性文法糖，React 可在特定的周期函數中進行處理。

Vue 架構對過渡動畫的支援，React 原生沒發現該能力。

Vue 提供一站式服務，React 往往在設計時需要考慮生态應用。

Vue 全局配置、全局 API 還是挺好用的，比如 Vue.use 可全局在執行個體中注入對象。

Vue 中的全局元件非常好用，不需要像 React 那樣一遍遍引入元件。

Vue 的 Template 中使用一些變量資料（例如常量）必須挂載在 this 上（簡直蛋疼），React 中的 JSX 萬物皆可 JavaScript。

React Hooks 新穎式概念和文法設計。

React Fragments 非常棒，Vue 暫時沒發現類似的功能（會造成更多的元素嵌套問題）。

...

溫馨提示：有更好的文法對比請在評論中告知。
可能追加的面試題

說說 React 和 Vue 的三個明顯的差別？

能說說 React 相比 Vue 的優勢在哪裡？

能說說 Vue 相比 React 的優勢在哪裡？

你覺得在什麼場景下用 Vue 或 React ?

Vue 篇

Vue CLI 3 有哪些特性？

面試題來源

履歷中寫着 Vue CLI 技術棧

解題思路

圖形化界面（vue ui）

插件系統

CLI 服務

Vue CLI 無需 Eject 即可進行 Webpack 配置（針對 Create React App）

可配置化 Polyfill

現代模式

Prefetch / Preload

webpack-merge / webpack-chain

浏覽器相容性

CSS 預處理器

環境變量

建構應用 / 庫 / Web Components 元件

部署（CORS / PWA）

...

可能追加的面試題

有沒有設計過通用的 Vuc CLI 插件？

有沒有設計過通用的 Vue 腳手架？

有研究過 Vue CLI 的源碼嗎？

能對比一下 Create React App 和 Vue CLI 3 嗎？

面試題來源

履歷上寫着熟悉 React 和 Vue 技術棧

解題思路

類型 Create React App Vue CLI 3.x

可一鍵建構 SPA 應用 √ √

Script react-scripts（可定制化） @vue/cli-service

ESLint 插件集 react-app eslint-plugin-vue（插件化）

CSS Modules √ √

CSS 預處理器自定義 Sass 天然支援 Sass & Less & Stylus（可配置化）

PostCSS 後處理器 √ √

HTML 和靜态資源 HTML 插值 & Svg 元件化 HTML 插件 & Preload & Prefetch & 多頁應用 & URL 規則

代碼分割 √ √

環境變量 √ √

PWA √ 插件化

單元測試 Jest 插件化（Ject & Mock & ...）

Proxy √ （靈活，但往往需要自定義） √（這種變成配置項）

TypeScript 模闆插件化

自定義腳手架模闆 Custom Templates（ template.json ） Preset & 插件系統（非常棒，可遠端）

Webpack 配置 Eject & Webpack files Inspect & vue.config.js & 預設配置全面 & webpack-merge & webpack-chain（有學習成本）

Webpack 分析 Source map explorer vue ui（GUI 互動式）

快速原型開發 × @vue/cli-service-global

互動式開發 × vue ui

浏覽器相容性現代浏覽器（自定義 Polyfill & browserslist） browserslist & Polyfill & 現代模式

建構應用應用 & 庫 & Web Components 元件 (異步)

溫馨提示：這裡指的是預設功能比較，而不是說不能進行功能自定義擴充！
Creat React App 在工程化體系上沒有 Vue CLI 3.x 更加的開箱即用，除此之外，Vue CLI 3.x 中的插件體系是一個非常棒的特性，它使自定義腳手架模闆變得非常靈活（非常适合企業定制化腳手架）。當然 Create React App 是有它自己的設計理念的，對于簡單的應用它是一種優勢（不可配置化預先約定）。

Vue.js 整個實作原理？

面試題來源

履歷中寫着熟悉 Vue.js 源碼，或者履歷中隻寫着 Vue.js 技術棧，或者面試的過程找不到亮點

解題思路

在阿裡我是如何當面試官的(含流程、注意點、面試題彙總等)

enter image description here

這裡簡單的描述一下 Vue 2.x 的運作機制（需要注意分析的是 Runtime + Compiler 的 Vue.js）。

初始化流程：

建立 Vue 執行個體對象

init 過程會初始化生命周期，初始化事件中心，初始化渲染、執行 beforeCreate 周期函數、初始化 data 、 props 、 computed 、 watcher 、執行 created 周期函數等。

初始化後，調用 $mount 方法對Vue執行個體進行挂載（挂載的核心過程包括模闆編譯、渲染以及更新三個過程）。

如果沒有在 Vue 執行個體上定義 render 方法而是定義了 template ，那麼需要經曆編譯階段。需要先将 template 字元串編譯成 render function ， template 字元串編譯步驟如下：

parse 正則解析 template 字元串形成 AST（抽象文法樹，是源代碼的抽象文法結構的樹狀表現形式）

optimize 标記靜态節點跳過 DIFF 算法（DIFF 算法是逐層進行比對，隻有同層級的節點進行比對，是以時間的複雜度隻有 O(n)。如果對于時間複雜度不是很清晰的，可以檢視我寫的文章ziyi2/algorithms-javascript/漸進記号https://github.com/ziyi2/algorithms-javascript/blob/master/doc/function-growth/asymptotic-symbol.md)）

generate 将 AST 轉化成 render function 字元串

編譯成 render function 後，調用 $mount 的 mountComponent 方法，先執行 beforeMount 鈎子函數，然後核心是執行個體化一個渲染 Watcher ，在它的回調函數（初始化的時候執行，以及元件執行個體中監測到資料發生變化時執行）中調用 updateComponent 方法（此方法調用 render 方法生成虛拟 Node，最終調用 update 方法更新 DOM）。

調用 render 方法将 render function 渲染成虛拟的Node（真正的 DOM 元素是非常龐大的，因為浏覽器的标準就把 DOM 設計的非常複雜。如果頻繁的去做 DOM 更新，會産生一定的性能問題，而 Virtual DOM 就是用一個原生的 JavaScript 對象去描述一個 DOM 節點，是以它比建立一個 DOM 的代價要小很多，而且修改屬性也很輕松，還可以做到跨平台相容）， render 方法的第一個參數是 createElement (或者說是 h 函數)，這個在官方文檔也有說明。

生成虛拟 DOM 樹後，需要将虛拟 DOM 樹轉化成真實的 DOM 節點，此時需要調用 update 方法， update 方法又會調用 pacth 方法把虛拟 DOM 轉換成真正的 DOM 節點。需要注意在圖中忽略了建立真實 DOM 的情況（如果沒有舊的虛拟 Node，那麼可以直接通過 createElm 建立真實 DOM 節點），這裡重點分析在已有虛拟 Node 的情況下，會通過 sameVnode 判斷目前需要更新的 Node節點是否和舊的 Node 節點相同（例如我們設定的 key 屬性發生了變化，那麼節點顯然不同），如果節點不同那麼将舊節點采用新節點替換即可，如果相同且存在子節點，需要調用 patchVNode 方法執行 DIFF 算法更新 DOM，進而提升 DOM 操作的性能。

需要注意在初始化階段，沒有較長的描述資料的響應式過程，這個在響應式流程裡做說明。

響應式流程：

在 init 的時候會利用 Object.defineProperty 方法（不相容 IE8）監聽Vue執行個體的響應式資料的變化進而實作資料劫持能力（利用了 JavaScript 對象的通路器屬性 get 和 set ，在未來的 Vue3 中會使用 ES6 的 Proxy 來優化響應式原理）。在初始化流程中的編譯階段，當 render function 被渲染的時候，會讀取Vue執行個體中和視圖相關的響應式資料，此時會觸發 getter 函數進行依賴收集（将觀察者 Watcher 對象存放到目前閉包的訂閱者 Dep 的 subs 中），此時的資料劫持功能和觀察者模式就實作了一個 MVVM 模式中的 Binder，之後就是正常的渲染和更新流程。

當資料發生變化或者視圖導緻的資料發生了變化時，會觸發資料劫持的 setter 函數， setter 會通知初始化依賴收集中的 Dep 中的和視圖相應的 Watcher ，告知需要重新渲染視圖， Wather 就會再次通過 update 方法來更新視圖。

可以發現隻要視圖中添加監聽事件，自動變更對應的資料變化時，就可以實作資料和視圖的雙向綁定了。

可能追加的面試題

Vue.js 源碼的入口主要做了些什麼處理？

Vue.js 中的資料劫持是怎麼實作的？浏覽器相容性呢？

Vue.js 中的依賴收集是怎麼處理的？和閉包有什麼關聯嗎？

Vue.js 中的模闆解析需要經曆哪幾個階段？

Vue.js 中的虛拟節點優勢是什麼？

Vue.js 中的 DIFF 算法是怎麼處理的？

Vue.js 中 DIFF 算法的時間複雜度是多少？為什麼？

Vue.js 中 computed / watch 實作的原理是什麼？

Vue.js 中有哪些周期函數？這些周期函數都是在什麼時機執行的？

Vue.js 中的 $nextTick 的原理是什麼？它主要經曆了哪些變化？為什麼？

Vue.js 對 DOM 的更新做了哪些标記優化處理？

Vue.js 在文法層面可以做哪些優化處理？

Vue.js 2.x 中的 Proxy 代理主要做了些什麼工作？

Vue.js 2.x 中如何支援 TypeScript ?

Vue 3.x 的源碼相對 Vue 2.x 主要做了哪些變化？

Vue.js 中的 M / V / VM 分别指的是哪些？

Vue-loader 主要有哪些特性？

Vue.js 如何做 ESLint 校驗？

Vue.js 如何做單元測試？

了解過 Vue-Router / Vuex 的源碼嗎？（感覺性問題，不會深入問）

釋出 / 訂閱模式和觀察者模式的差別是什麼？

手寫一個釋出 / 訂閱模式？

簡述 MVC / MVP / MVVM 的差別？

如果熟悉 Nuxt 等可能會問 SSR 的實作原理？

平常遇到 Vue.js 報 error / warning 的時候有深入追蹤錯誤棧的習慣嗎？

Vue 2.x 中的資料劫持能否采用釋出 / 訂閱模式實作？采用觀察者模式帶來的優勢和劣勢有哪些？

Vue 的整個架構的實作原理大緻可分為哪幾個部分？

參考連結

基于 Vue 實作一個簡易 MVVM （https://juejin.im/post/5cd8a7c1f265da037a3d0992）

Vue.js 中元件之間通信有哪些方案？

解題思路

Vuex

Event Bus

Pub / Sub

Emit / On

provide / inject

Element UI dispatch / broadcast

props

parent / children 執行個體對象

可能追加的面試題

Element UI 中 dispatch 和 broadcast 是如何實作的？

祖先和子孫之間通信有哪些方案？

任意元件之間通信有哪些方案？

Vue 如何定制化腳手架？需要考慮哪些因素？

建設中...

$nextTick 執行的時機和 DOM 渲染的關系是什麼？

可能追加的面試題

什麼是 Event Loop ?

宏任務和微任務有什麼差別？

哪些是宏任務哪些是微任務？

$nextTick 在幾個版本疊代中都經曆了什麼變化？

打開新的浏覽器視窗時會重新建立一個新的 Network 程序嗎？

參考連結

你真的了解$nextTick麼（https://juejin.im/post/5cd9854b5188252035420a13）

Vue 使用的是什麼版本，如何配合 TypeScript 工作，TypeScript 有哪些特性？

建設中...

Vue 裡的 keep-alive 是怎麼實作的？

建設中...

面試題來源

履歷中出現
keep-alive
資訊

可能追加的面試題

設定了 keep-alive 之後對元件渲染的生命周期有什麼影響？

keep-alive 有哪些特性？

說說 Vue 裡的資料劫持在不同版本裡是如何處理的？

建設中...

Vue 能做哪些性能優化？

解題思路

keep-alive

路由懶加載

Preload / Prefetch

key

響應式依賴扁平化

減少非必要的響應式依賴

Object.freeze

DOM 滾動加載

v-if / v-show

computed / watch

事件銷毀（防止記憶體洩漏）

元件按需引入

預渲染

按需 Polyfill

模闆預編譯

渲染函數

官方風格指南 + 官方 ESLint 插件

...

可能追加的面試題

路由懶加載是如何實作的？

Coding Split 和哪些 Webpack 配置相關？

Polyfill 是什麼？Vue 支援哪些相關的可配置化資訊？

Vue 中可以使用 JSX 嗎？（居然有人不清楚 JSX 是什麼）

元件篇

React 中受控元件和非受控元件的差別？

面試題來源

履歷寫着抽取公共業務元件

解題思路

資料由 React 元件 / DOM 節點管理

可能追加的面試題

在哪些場景應該使用非受控元件？

參考連結

Controlled and uncontrolled form inputs in React don't have to be complicated

React 中如何實作一個 Input 元件開發？

建設中...

公司的元件庫搭建、設計與維護？

面試題來源

履歷寫着設計和維護公司的元件庫

解題思路

完整引入 / 按需引入

建構流程設計

單元測試

輸出模式（umd / commonjs2 / es6）

樣式建構

國際化 / 工具

ESLint / Prettier / Stylint

TypeScript（聲明） / JavaScript

Webpack 配置 / Webpack 分析

Babel 處理

Polyfill 注意點

Markdown 示範 & CI

三方庫處理方式

浏覽器相容性

Autoprefixer

Lerna / Single Npm / Multiple Npm

Single Npm & Template

Git 鈎子處理 & Git 規範

語義化版本規範

團隊 / 範圍 / 開發規範 / 代碼 Review

可能追加的面試題

Webpack 建構速度 / 性能優化？

Webpack 分析工具？

元件庫的架構設計？

建構 Bundle 優化？

按需加載功能可以有哪些實作方案？

主要負責了哪些元件的設計？

主動性的業務元件封裝案例？

看過 xxx 元件庫的源碼設計嗎？

設計元件的時候會考慮對 TypeScript 進行支援嗎？

業務元件的單元測試一般需要測試什麼内容？

參考連結

Vue CLI 3結合Lerna進行UI架構設計（https://juejin.im/post/5cb12844e51d456e7a303b64）

了解 Element UI 元件的架構設計嗎？

面試題來源

履歷寫着使用 Element UI 進行業務開發并自己設計過元件

參考連結

Vue CLI 3結合Lerna進行UI架構設計(https://juejin.im/post/5cb12844e51d456e7a303b64)

元件庫要做按需加載，覺得應該怎麼做？

面試題來源

履歷寫着使用使用按需加載提升頁面性能

解題思路

Single Npm

Lerna

Multi Entry Syntax

如何自動屏蔽 Input 的自動密碼填充？

設計模式篇

設計模式中觀察者模式和釋出 / 訂閱模式有哪些差別？

面試題來源

履歷中寫着熟悉設計模式、Redis、Vue 源碼等

可能追加的面試題

平常在哪些地方有使用到觀察者或釋出 / 訂閱模式？

參考連結

基于Vue實作一個簡易MVVM(https://juejin.im/post/5cd8a7c1f265da037a3d0992)

了解 MVC / MVP / MVVM 的差別嗎？

參考連結

基于Vue實作一個簡易MVVM(https://juejin.im/post/5cd8a7c1f265da037a3d0992)

工程化篇

Webpack 建構速度優化有哪些方案？

面試題來源

項目中寫着使用 Webpack 進行建構速率優化

解題思路

speed-measure-webpack-plugin

排除三方庫，防止二次打包

thread-loader

cache-loader

HappyPack

parallel-webpack

...

可能追加的面試題

未優化前建構需要多少時間，優化後建構需要多少時間？

有沒有分析是什麼問題導緻建構速率變慢？

說說你對 cz 生态的了解？

面試題來源

項目中寫着使用 cz 規範 Git 送出

參考連結

Cz工具集使用介紹 - 規範Git送出說明

簡單說說 Webpack 對于性能優化有哪些特性？

建設中...
性能優化篇

了解 SPA 的懶加載麼？

建設中...

Vue 如何配合 Echarts / OpenLayers 實作性能優化？

建設中...
服務篇

有做過基于 Express 的應用架構技術選型麼？

建設中...

前後端分離的曆史？分離模式帶來的好處和壞處有哪些？

建設中...

Node 裡的事件循環機制和浏覽器的事件循環機制有什麼差別？

建設中...

說說怎麼用純粹的 Node.js 做一個服務端架構？談談 Node.js 服務端 MVC 的了解？

建設中...

熟悉 Node，談談服務端 MVC 的演變曆史？

建設中...

跨域的解決方案有哪些？cors 是怎麼處理跨域？

建設中...
架構篇

什麼是 H5 ?

建設中...

AMD 、CMD 和 CommonJS 差別？

建設中...

可能追加的面試題

common.js 和 ES 6 中子產品引入的差別？

如何設計突發大規模并發架構？

建設中...

一般公司是怎麼部署前端代碼？

建設中...
HTTP 篇

随便聊聊 Ajax，聊聊 axios？

建設中...

axios 庫有什麼能力？axios 庫發請求的之前能做攔截麼？

建設中...

可能追加的面試題

axios 庫發請求的之前能做攔截麼？

axios 庫發請求的時候能取消請求麼？

硬體層和前端是如何做通訊的？

可能追加的面試題

WebSocket 的浏覽器相容性如何處理？

談談你對緩存的了解，舉一個和你最相關的緩存的使用案例。

建設中...

服務端推送主要用到什麼技術？

建設中...

HTTP 2 相對于 HTTP 1 有什麼差別？

建設中...

WebSokect 本質上是基于什麼協定進行通信的（TCP / UDP）？

可能追加的面試題

在不相容 WebSockect 的情況下如何做降級相容處理？

簡單介紹一下 Graphql，說說為什麼要在你的項目中使用 Graphql？

建設中...

了解跨域麼，一般什麼情況下會導緻跨域？

建設中...

cookie 和 session 的差別？

建設中...
測試篇

平常開發的過程中有寫過單元測試或者 e2e 測試麼？

建設中...

自動化測試主要是做什麼？

建設中...
優化篇

SEO 有哪些優化方案？

建設中...

可能追加的面試題

預渲染的原理是什麼？

說說任何前端優化處理？

建設中...
業務篇

規範代碼書寫的适用範圍有多大？

版權資訊小工具是幹什麼的，能具體介紹一下麼？

介紹一下 dtd 元件，元件是如何維護的，版本是怎麼控制的？

在業務的開發中有沒有發現什麼痛點并對其進行改進？

有沒有覺得互動設計不合理然後自己想出方案推動互動更改的案例？

前端廣告投放如何？Chrome 如何劫持廣告？

簡化業務設計的複雜度案例有麼？

有沒有做過什麼工具簡化業務開發？

Moxtra 是你主推的麼？講講RxJS?

有沒有主動 own 過業務，并高效排除業務風險的案例？

說說如何衡量提升産品的體驗？

溫馨提示：有些業務問題主要針對的是履歷中的項目，在這裡不适合展示。不過有一點需要注意，面試官可能會對業務的資料非常感興趣，是以在業務上有比較 NB 的資料可以展現的最好可以提前準備好。業務這一塊可能會考量的點：業務資料 / 業務難點 / 業務成果 / 業務貢獻 / 業務主動性 / 業務 own 能力 / 技術棧選型考量 / 業務影響範圍 / 業務通用性 / 業務思考 ......

名詞解析篇

什麼是漸進增強和優雅降級？

建設中...
筆試篇

0 1 1 2 3 5 8，假設第 0 個是 0，第 1 個是 1，求第 n 個數的實作方式？

簡單實作一個釋出訂閱機制？

簡單實作帶立即執行參數的消抖函數： function debounceImmediate (fn: Function, wait: number, immediate: boolean)） ？

實作一個撲克牌式的插入排序（我們總是喜歡将某張撲克牌插入到已排序的撲克中），輸入： [5,6,1,8,7,2,4,3] ，輸出： [1,2,3,4,5,6,7] ，并提供單元測試思路（如何測試你的代碼是穩定正确的）？

混沌篇

你覺得你最擅長什麼？

假設某個組織下面挂了 10 w 個節點，如何做優化處理？

用 Vue 的時候有沒有遇到過難以解決的問題？

說說你業務中覺得性能優化最大的一個場景？

說說你業務中至今沒有解決的問題？

說說你業務中遇到最難解決的問題？

八卦篇

高效的自學能力，能舉個例子展現一下高效麼？

除了業務上的開發，平常會有什麼學習計劃麼？
❤️愛心三連擊1.看到這裡了就點個在看支援下吧，你的「在看」是我創作的動力。
2.關注公衆号程式員成長指北，「帶你一起學Node」！
3.特殊階段，帶好口罩，做好個人防護。
4.添加微信【ikoala520】，拉你進技術交流群一起學習。



“在看轉發”是最大的支援
           

類型	優缺點
構造函數模式	可以建立不同執行個體屬性的副本，包括引用類型的執行個體屬性，但是不能共享方法
原型模式	引用類型的屬性對于執行個體對象而言共享同一個實體空間，是以可以共享方法
原型鍊	對父類實作方法和屬性繼承的過程中，父類執行個體對象的引用類型屬性在子類的執行個體中共享同一個實體空間，因為父類的執行個體對象指向了子類的原型對象
借用構造函數	解決了繼承中的引用值類型共享實體空間的問題，但是沒法實作方法的共享
組合繼承	屬性的繼承使用借用構造函數方法，方法的繼承使用原型鍊技術，即解決了引用值類型共享的問題，又實作了方法的共享，但是子類的原型對象中還存在父類執行個體對象的執行個體屬性
寄生組合繼承	組合繼承已經可以解決大部分問題，但是也有缺陷，就是會調用兩次父類的構造函數，一次是實作原型時使子類的原型等于父類的執行個體對象調用了父類構造函數（同時在子類的原型對象中還存在了父類執行個體對象的執行個體屬性），一次是使用子類構造函數時調用了一次父類構造函數。寄生組合式繼承可以解決在繼承的過程中子類的原型對象中還存在父類執行個體對象的執行個體屬性的問題。

架構	React	Vue 2.x
類型	MVVM	MVVM
響應式	√	√
元件化	√	√
腳手架	Create React App	Vue CLI
路由	react-router	vue-router
狀态管理	react-redux / React Hooks / MobX	vuex
整體思路	函數式、單向資料流	聲明式、表單雙向綁定
元件優化	PureComponent / shouldComponentUpdate	可了解為自動化 shouldComponentUpdate
HTML	JSX (結構 & 表現 & 行為融合、完整的 JavaScript / TypeScript 文法支援、先進的開發工具 Lint / 編輯器 Auto 等)	Template（結構 & 表現 & 行為分離、HTML 更友好、開發效率提升、文檔學習成本） / JSX
CSS	CSS 作用域需要額外實作，例如一些 CSS-in-JS 方案（styled-components、styled-jsx），一般需要額外的插件支援文法高亮和提示	單檔案元件 Style 标簽
Chrome 開發工具	react-devtools	vue-devtools
優勢	大規模應用程式的魯棒性（靈活的結構和可擴充性）、适用原生 App、豐富的生态圈、豐富的工具鍊	一站式解決方案、更快的渲染速度和更小的體積

類型	Create React App	Vue CLI 3.x
可一鍵建構 SPA 應用	√	√
Script	react-scripts（可定制化）	@vue/cli-service
ESLint 插件集	react-app	eslint-plugin-vue（插件化）
CSS Modules	√	√
CSS 預處理器	自定義 Sass	天然支援 Sass & Less & Stylus（可配置化）
PostCSS 後處理器	√	√
HTML 和靜态資源	HTML 插值 & Svg 元件化	HTML 插件 & Preload & Prefetch & 多頁應用 & URL 規則
代碼分割	√	√
環境變量	√	√
PWA	√	插件化
單元測試	Jest	插件化（Ject & Mock & ...）
Proxy	√ （靈活，但往往需要自定義）	√（這種變成配置項）
TypeScript	模闆	插件化
自定義腳手架模闆	Custom Templates（ `template.json` ）	Preset & 插件系統（非常棒，可遠端）
Webpack 配置	Eject & Webpack files	Inspect & vue.config.js & 預設配置全面 & webpack-merge & webpack-chain（有學習成本）
Webpack 分析	Source map explorer	vue ui（GUI 互動式）
快速原型開發	×	@vue/cli-service-global
互動式開發	×	vue ui
浏覽器相容性	現代浏覽器（自定義 Polyfill & browserslist）	browserslist & Polyfill & 現代模式
建構	應用	應用 & 庫 & Web Components 元件 (異步)

在阿裡我是如何當面試官的(含流程、注意點、面試題彙總等)

面試資料

面試注意點

面試題解析

HTML 篇

在 HTML 中如何做 SEO 優化？

首屏和白屏時間如何計算？

CSS 篇

了解 Flex 布局麼？平常有使用 Flex 進行布局麼？

CSS 中解決浮動中高度塌陷的方案有哪些？

Flex 如何實作上下兩行，上行高度自适應，下行高度 200px？

如何設計一個 4 列等寬布局，各列之間的邊距是 10px（考慮浏覽器的相容性）？

CSS 如何實作三列布局，左側和右側固定寬度，中間自适應寬度？

CSS 清除浮動的原理是什麼？

BFF 的作用有哪些？

CSS 中的 background 的 background-image 屬性可以和 background-color 屬性一起生效麼？

了解 CSS 3 動畫的硬體加速麼？在重繪和重流方面有什麼需要注意的點？

比較一下 TypeScript 和 JavaScript，在什麼情況下你覺得需要 TypeScript ?

在 JavaScript 中如何實作對象的私有屬性?

async / await 和 Promise 的差別?

在 JavaScript 可以有哪幾種形式實作繼承，各有什麼優缺點？

React 篇

React 中的 setState 為什麼需要異步操作？

React 應用如何在重新加載頁面時保留資料？

使用 React Hooks 的同時為什麼需要使用高階元件？

Ajax 請求放在 componentDidMount 裡進行處理還是放在 componentWillMount 裡進行處理比較合适？

React 在文法層面可以做哪些性能優化？

React 和 Vue 的差別？

Vue 篇

Vue CLI 3 有哪些特性？

能對比一下 Create React App 和 Vue CLI 3 嗎？

Vue.js 整個實作原理？

Vue.js 中元件之間通信有哪些方案？

Vue 如何定制化腳手架？需要考慮哪些因素？

$nextTick 執行的時機和 DOM 渲染的關系是什麼？

Vue 使用的是什麼版本，如何配合 TypeScript 工作，TypeScript 有哪些特性？

Vue 裡的 keep-alive 是怎麼實作的？

說說 Vue 裡的資料劫持在不同版本裡是如何處理的？

Vue 能做哪些性能優化？

元件篇

React 中受控元件和非受控元件的差別？

React 中如何實作一個 Input 元件開發？

公司的元件庫搭建、設計與維護？

了解 Element UI 元件的架構設計嗎？

元件庫要做按需加載，覺得應該怎麼做？

如何自動屏蔽 Input 的自動密碼填充？

設計模式篇

設計模式中觀察者模式和釋出 / 訂閱模式有哪些差別？

了解 MVC / MVP / MVVM 的差別嗎？

工程化篇

Webpack 建構速度優化有哪些方案？

說說你對 cz 生态的了解？

簡單說說 Webpack 對于性能優化有哪些特性？

性能優化篇

了解 SPA 的懶加載麼？

Vue 如何配合 Echarts / OpenLayers 實作性能優化？

服務篇

有做過基于 Express 的應用架構技術選型麼？

前後端分離的曆史？分離模式帶來的好處和壞處有哪些？

Node 裡的事件循環機制和浏覽器的事件循環機制有什麼差別？

說說怎麼用純粹的 Node.js 做一個服務端架構？談談 Node.js 服務端 MVC 的了解？

熟悉 Node，談談服務端 MVC 的演變曆史？

跨域的解決方案有哪些？cors 是怎麼處理跨域？

架構篇

什麼是 H5 ?

AMD 、CMD 和 CommonJS 差別？

如何設計突發大規模并發架構？

一般公司是怎麼部署前端代碼？

HTTP 篇

随便聊聊 Ajax，聊聊 axios？

axios 庫有什麼能力？axios 庫發請求的之前能做攔截麼？

硬體層和前端是如何做通訊的？

談談你對緩存的了解，舉一個和你最相關的緩存的使用案例。

服務端推送主要用到什麼技術？

HTTP 2 相對于 HTTP 1 有什麼差別？

WebSokect 本質上是基于什麼協定進行通信的（TCP / UDP）？

簡單介紹一下 Graphql，說說為什麼要在你的項目中使用 Graphql？

了解跨域麼，一般什麼情況下會導緻跨域？

cookie 和 session 的差別？

測試篇

CSS 中的 `background` 的 `background-image` 屬性可以和 `background-color` 屬性一起生效麼？

React 中的 `setState` 為什麼需要異步操作？

Ajax 請求放在 `componentDidMount` 裡進行處理還是放在 `componentWillMount` 裡進行處理比較合适？

`$nextTick` 執行的時機和 DOM 渲染的關系是什麼？

Vue 裡的 `keep-alive` 是怎麼實作的？

簡單實作帶立即執行參數的消抖函數： `function debounceImmediate (fn: Function, wait: number, immediate: boolean)）` ？

實作一個撲克牌式的插入排序（我們總是喜歡将某張撲克牌插入到已排序的撲克中），輸入： `[5,6,1,8,7,2,4,3]` ，輸出： `[1,2,3,4,5,6,7]` ，并提供單元測試思路（如何測試你的代碼是穩定正确的）？