1. 求推薦一下關於Web前端的相關資料！
一）前端基本功
前端相關的基礎知識
《HTTP/3 來了 ！未來可期》
《你可能已經忽略的 git commit 規范》
《手寫一個 WebSocket 協議》
《5000字解析：前端五種跨平台技術》
《一篇搞定移動端適配》
《Chrome DevTools中的這些騷操作，你都知道嗎？》
《Chrome 運行時性能瓶頸分析》
《當瀏覽器全面禁用三方 Cookie》
《無形中提高工作效率的 Chrome 插件》
《還分不清 Cookie、Session、Token、JWT？》
《你連 HTTPS 原理都不懂，還講「中間人攻擊」？》
《npm install 原理分析》
《不容錯過的 Babel 7 知識匯總》
《一文搞懂 Web 中暗藏的密碼學》
《解讀HTTP/2與HTTP/3 的新特性》
《那些不常見，但卻非常實用的 CSS 屬性》
《面試官：你可以用純 CSS 判斷滑鼠進入的方向嗎？》
《二營長，快掏個CSS出來給我畫個井字棋游戲》
《CSS 故障藝術》
《我寫CSS的常用套路(附demo的效果實現與源碼）》
《來自新時代的 CSS》
《你還不會 CSS 動畫？》
《誰說前端不需要懂二進制》
《你不知道的 Blob》
《Javascript常用的 60 余種工具方法》
《你可以這樣優化 if-else 代碼結構》
《JS 圖片壓縮的實現思路》
《一個簡潔、有趣的無限下拉方案》
《請你實現一個大文件上傳和斷點續傳》
《從 ES6 到 ES10 的新特性萬字大總結》
《JavaScript 手寫代碼無敵秘籍》
《通俗易懂的 TypeScript 入門教程》
《用 TypeScript 編寫 React 的最佳實踐》
《一文讀懂 JS 裝飾器》
《你真的懂 Promise 嗎？》
《Typescript 那些好用的技巧》
《Typescript 嚴格模式有多嚴格？》
《用 TypeScript 編寫 React 的最佳實踐》
《2020 年你應該知道的 React 庫》
《5 個技巧助你編寫更好的 React 代碼》
《10個案例讓你徹底理解React hooks的渲染邏輯》
《組件演進史：從Mixin到HOC，再到Hook》
《1.1萬字從零解讀Vue3.0源碼響應式系統》
《重頭來過的 Vue 3 帶來了什麼？》
《一杯茶的時間，上手 Node.js》
《深入理解 Node.js 進程與線程》
《Deno 會取代 Node.js 嗎？》
《了不起的 Deno 入門教程》
《推倒 Node 重做，Deno 1.0 來了》
《一文搞懂 Webpack 多入口配置》
《GraphQL-前端開發的利劍與橋梁》
《GraphQL 入門看這篇就夠了》
《前端工程師應該了解的 GraphQL》
《高頻前端面試題》
《吐血整理！再來一打 Webpack 面試題》
《前端同學經常忽視的一個 JavaScript 面試題》
《如何輕松拿到淘寶前端 offer》
《三年大廠面試官：二面題》
《十幾道含答案的大廠面試題總結》
《如何答一道驚艷面試官的數組去重問題？》
《10 個 CSS 高頻面試題，你都會嗎？》
《經常被面試官考的 JS 數據類型知識你真的懂嗎？》
《面試須知：瀏覽器相關原理詳細總結》
《2019 大齡前端如何准備面試？》
《2018 大廠高級前端面試題匯總》
《前端如何在項目中做出亮點》
《Facebook 前端技術棧重構分享》
《當前端基建任務落到你身上，該如何推動協作？》
《使用 docker 高效部署你的前端應用》
《關於前端學習路線的一些建議》
《各種場景喚起 App 的騷操作》
《Web 視頻播放前前後後那些事》
《你必須要注意的依賴安全漏洞》
《從 12.67s 到 1.06s 的網站性能優化實戰》
《網易雲音樂前端性能監控實踐》
《一個阿里前端工程師的成長之路》
《非常全面的前端協作規范》
《一名合格前端工程師的自檢清單》
《從 0 到 1 再到 100：搭建、編寫、構建一個前端項目》
CSS
JavaScript
TypeScript
二）前端框架、工具、庫
React
Vue
Nodejs
Deno
Webpack
GraphQL
VS Code
《動圖演示11個必備 VS Code 插件》
三）面試題精選
四）前端開發的職業修煉
希望對你有用，望採納~
2. web前端開發工程師需要掌握哪些技術
第一階段：Web基礎
1.HTML
知識要點：web工作原理、HTML4及HTML5、常見標簽、相對路徑與絕對路徑、HTML5標簽
2.CSS+布局
知識要點：CSS基本語法、基本選擇器、復合選擇器、背景圖片、盒子模型、精靈圖、常見網頁布局、浮動定位、Flex布局、響應式布局、移動端適配、網頁動畫、CSS3新特性、Less預處理器
第二階段：JavaScript
3.ECMA基礎
知識要點：ECMA基本語法、數據類型、運算符、分支結構、循環結構、函數、常見內置對象的屬性和方法、Array、Math、Date、String
4.DOM
知識要點：DOM模型、節點類型、節點的基本操作、JS操作樣式表、克隆節點、獲取坐標位置、獲取元素尺寸、節點的各種屬性和方法。
5.BOM+jQuery
知識要點：History、Location、Navigate、定時器、線程、事件循環、web工作原理、性能優化、事件對象、正則表達式、jQuery框架
第三階段：企業級框架
6.vue框架基本語法
知識要點：vue基本語法、雙向綁定、組件傳值、條件渲染、列表渲染、事件處理、表單綁定、自定義事件、插槽、過渡、動畫、動態路由、嵌套路由、編程式導航、導航守衛、路由懶載入、腳手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知識要點：將知識點融會貫通到案例中。
8.react基本語法
知識要點：react簡介、jsx語法、元素渲染、組件和props、state、生命周期、表單、條件渲染、組合繼承、hooks、性能優化、rex
9.react案例
知識要點：將知識點融會貫通到案例中
新增內容：微信小程序及uni-app框架
知識要點：
小程序框架（配置/程序與頁面注冊/路由），開發者工具
小程序框架組件學習（基礎/視圖/表單/地圖/媒體/導航/開發能力）
小程序框架組件學習（地圖/媒體/導航/開發能力）
小程序API（基礎/路由/界面/網路/數據緩存/位置服務）
小程序API（設備/媒體/開放介面/授權/登錄/支付）
第四階段：前端全棧
10.Node伺服器與資料庫及框架
知識要點：Node原生模塊、跨域、安全校驗、數據加密、資料庫基本操作、express框架、koa框架
11.Node 項目周/WebPack
知識要點：需求、效果圖、編碼
3. 從0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架
因為現在公司的主要技術棧是React,所以也想著能夠搭建一個好的React前端框架，方便在工作中使用；框架在打包過程也做了優化，多線程，拆包，緩存等等手段提升打包速度和質量。主要用到的庫包括：
創建帶TypeScript模板的react-app，推薦使用yarn,接下來我也主要以yarn做例子
然後在項目根目錄創建一個 craco.config.js 用於修改默認配置。antd按需載入以及自定義主題
重新打包就可以了， 所有的主題配置在這里噢
這里利用React-router做路由，同時也會根據用戶角色，做許可權處理；只有當角色和路由允許的角色一致時才可以訪問和展示。
新建router下新建indext.tsx 用於渲染頁面
引入Router/index.tsx
新建hasPermission.ts,如果頁面 roles 包括用戶的角色則返回true,在渲染menu和子頁面的時候就根據這個值渲染頁面。
比如Home頁面，渲染子頁面的邏輯：
在這里 SubPages1 下面的 page1 就無法展示出來和訪問，如果直接輸入路由也會訪問頁面不存在，因為page1允許的角色 user 而我們角色是 admin 所以無法展示。
useImmer 很好的解決了ReactHooks中的賦值的性能問題，可以單獨更新某個對象的某個屬性。
上面的賦值方法也可以寫到一起,效果是一樣的：
Umi Hooks 是一個 React Hooks 庫，致力提供常用且高質量的 Hooks。提供了非常多的Hooks組件，比如上面使用的 usePersistFn ，他的作用：在某些場景中，你可能會需要用 useCallback 記住一個回調，但由於內部函數必須經常重新創建，記憶效果不是很好，導致子組件重復 render。對於超級復雜的子組件，重新渲染會對性能造成影響。通過 usePersistFn ，可以保證函數地址永遠不會變化。Umi Hooks功能還是非常強大的，有很多功能很強大的API。大家可以去官方文檔看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。
自定義 hooks 其實在我們的開發工作中，還是很常遇到的。 hooks 的好處就是可以抽離公共方法，像組件一樣的隨意使用，對於快節奏的開發工作還是很舒服的，比如你覺得 react hooks 或者 umi hooks 的api，不能滿足自己的需求，也可以自己創新一些api。我這里舉個例子，大家寫 class 組件寫的很多的話，會經常用的 this.setState() ，大家都知道 this.setState() 是非同步執行，你無法直接拿到最新的 state 。 hooks 中的 useState 同樣也是非同步的，你無法直接獲取到最新的 state ，所以我自己寫了一個 useSetState 方法，用於在修改完狀態後能夠立即拿到最新的 state 。
我們在src/hooks文件夾下新建 useSetState.ts
使用的方式也很簡單，基本和useState一致，只是在setState的時候提供一個回調函數。
這就完成了帶回調的 useSetState hooks 的編寫，不過這種寫法不太推薦在 hooks 中使用，建議需要獲取最新的數值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。
狀態管理選擇的Mobx,Mobx和Rex我都用過，不過當我習慣用Mobx後，就感覺還是Mobx更方便一些，所以更喜歡在項目中用Mobx,現在Mobx已經更新到5.0版本了，不過5.0版本並不支持ie11，所以如果想要兼容性可以選擇4.0的版本，或者Rex。
這里推薦一個針對Mobx的庫， mobx-react-lite :它是基於 React 16.8 和 Hooks 的 MobX 的輕量級React綁定。
這個主要影響的是調用方法的形式，對於Mobx的書寫是一樣的，比如寫一個加減數值：
這里你的typeScirpt可能會編譯不了，會報錯：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解決方法是在 tsconfig.json 加入配置：
完畢以後，一定要把 storeProvider 包裹所需要共享狀態的頁面，我這里直接放到app.tsx
剩下來就僅僅是調用的事情了：
此外axios的配置應該大家都知道，所以我這也不多說了，具體在我的源碼裡面也有，utils下的axios.ts
加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin
加入了打包進度條 webpackbar
加入了打包壓縮 compression-webpack-plugin terser-webpack-plugin
還對包進行拆包
開發環境的域名代理 devServer
加快打包速度，還可以考慮刪除antd-icons，單獨去iconfont網站下，按需引入。不然打包會費很多時間
引入dotenv-cli
新增開發環境配置文件 .env.development 和 .env.proction 兩個文件
然後修改package.json中的啟動腳本：
現在 yarn start 或者 yarn build 就會根據環境配置來處理。
還有一些細節的調整，會盡力將這個框架更加完善的。
github地址： https://github.com/Benzic/React-typescript-umihooks-mobx
歡迎star 和提意見
4. 2021年的前端框架選擇 Angular vs React vs Vue
每個前端開發人員都聽說過三個用於構建 Web 應用程序的框架：React、Vue.js和Angular。
React 是一個 UI 庫，Angular 是一個成熟的前端框架，而 Vue.js 是一個漸進式框架。
它們幾乎可以互換使用來構建前端應用程序，但它們並非 100% 相同，因此比較它們並了解它們的差異是有意義的。
每個框架都是基於組件的，並允許快速創建 UI 功能。
然而，它們都有不同的結構和架構——所以首先，我們將研究它們的架構差異以了解它們背 後的哲學。
React 不強制執行特定的項目結構，正如您從下面的官方「Hello World」示例中看到的那樣，您只需幾行代碼即可開始使用 React。
React 可以用作 UI 庫來渲染元素，而無需強制執行特定的項目結構，這就是它不是嚴格意義上的框架的原因。
React Elements是 React 應用程序的最小構建塊。它們比 DOM 元素更強大，因為 React DOM 確保在發生變化時有效地更新它們。
組件是更大的構建塊，定義了在整個應用程序中使用的獨立且可重用的部分。它們接受稱為 props 的輸入並生成元素，然後顯示給用戶。
React 基於 JavaScript，但它主要與JSX (JavaScript XML)結合，這是一種語法擴展，允許您創建同時包含 HTML 和 JavaScript 的元素。
您使用 JSX 創建的任何內容也可以使用 React JavaScript API 創建，但大多數開發人員更喜歡 JSX，因為它更直觀。
Vue.js 核心庫只關注視圖層。之所以稱為漸進式框架，是因為您可以使用官方和第三方包（例如Vue Router或Vuex ）擴展其功能，將其轉變為實際框架。
雖然 Vue 與 MVVM（Model-View-ViewModel）模式沒有嚴格關聯，但它的設計部分受到了它的啟發。使用 Vue，您將主要在 ViewModel 層上工作，以確保以允許框架呈現最新視圖的方式處理應用程序數據。
Vue 的模板語法讓您可以創建 View 組件，並將熟悉的 HTML 與特殊指令和功能相結合。這種模板語法是首選，即使原始 JavaScript 和 JSX 也受支持。
Vue 中的組件很小，是自包含的，並且可以在整個應用程序中重復使用。帶有擴展名的單文件組件(SFC).vue包含 HTML、CSS 和 JavaScript，因此所有相關代碼都位於一個文件中。
SFC 是在 Vue.js 項目中組織代碼的推薦方式，尤其是大型項目。需要使用 Webpack 或 Browserify 等工具將 SFC 轉換為可用的 JavaScript 代碼。
在本文中，我討論的是 Angular 2，而不是現在稱為 AngularJS 的框架的第一個版本。
AngularJS，原始框架，是一個MVC（模型-視圖-控制器）框架。但是在Angular 2 中，與 MV*-patterns 沒有嚴格的關聯，因為它也是基於組件的。
Angular 中的項目被組織成模塊、組件和服務。每個 Angular 應用程序至少有一個根組件和一個根模塊。
Angular 中的每個組件都包含一個模板、一個定義應用程序邏輯的類和元數據（裝飾器）。組件的元數據告訴 Angular 在哪裡可以找到創建和呈現其視圖所需的構建塊。
Angular 模板是用 HTML 編寫的，但也可以包含帶有特殊指令的Angular 模板語法，以輸出反應性數據和呈現多個元素等。
組件使用 Angular 中的服務來委託業務邏輯任務，例如獲取數據或驗證輸入。它們是 Angular 應用程序的獨特部分。雖然 Angular 不強制使用它們，但強烈建議將應用程序構建為一組可以重用的不同服務。
Angular 內置於 TypeScript 中，因此建議使用它以獲得最無縫的體驗，但也支持純 JavaScript。
React 是最受歡迎的 JavaScript 項目之一，在 GitHub 上擁有 16 萬顆星。它由 Facebook 開發和維護，並在他們的許多項目內部使用。此外，根據BuiltWith的使用統計數據，它為超過 200 萬個網站提供支持。
在三個框架中，Vue在 GitHub上的 star 數最多，有 176k。該項目由前 Google 員工 Evan You 開發和領導。據BuiltWith 稱，這是開源社區中一個非常強大的獨立項目，被超過 100 萬個網站使用。
Angular 是由 Google 開發的，但令人驚訝的是它並沒有用於他們的一些旗艦產品，例如搜索或 Youtube。它經常用於企業項目，並基於BuiltWith的數據為超過 97,000 個網站提供支持。
它是三個框架中星數最少的，在 GitHub 上有 68k 星。然而，當從 Angular 1 切換到 Angular 2 時，他們創建了一個全新的代碼庫，而不是繼續AngularJS項目，該項目也有 59k 星。
在開發應用程序時，開源包可以為您節省寶貴的時間。不僅如此，它們通常比定製組件和封裝更好，因為它們經過了實戰測試。
查看可幫助您更輕松地創建新功能的現成組件、主題和其他工具的可用性非常重要。
許多前端應用程序依賴全局狀態管理來存儲信息，例如誰登錄和其他用戶設置。
最流行的 JavaScript 狀態管理項目是Rex。大多數開發人員使用Rex的官方 React 綁定，這些綁定由 Rex 團隊維護。
由於 React 的流行，查找輸入組件和現成的元素非常容易。它們都只是在 Google 或 GitHub 上搜索即可。
React 生態系統還包括React Native，它允許您從用 React 編寫的單個代碼庫構建原生 iOS 和 Android 應用程序。因此，React 也可以成為使用 Web 技術構建移動應用程序的絕佳選擇。
React 是 MERN 堆棧的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。這種組合的偉大之處在於，單一語言——JavaScript——為整個應用程序提供動力。
盡管 Rex 可以在 Vue 中使用，但沒有官方綁定。但這不應該讓您擔心，因為Vuex是專門為 Vue 應用程序製作的官方狀態管理庫。除了與 Vue 很好地集成之外，使用 Vue 的開發人員工具進行調試也很容易。
在 Vue 的早期，很難找到現成的組件。隨著社區的發展，您可以使用各種輸入組件和高級元素來加快開發速度。
對於移動應用程序開發，有一個名為Weex 的新興項目。Weex 由阿里巴巴開發和使用，但不如 React Native 成熟和強大。更重要的是，由於該項目在中國開發和使用較多，因此很難找到英文文檔和解決問題的方法。
Vue 與 Laravel 集成得很好，這就是為什麼它們經常一起使用。Laravel 提供完整的JavaScript 和 CSS 腳手架，以支持在新項目中使用 Vue。
對於 Angular 中的狀態管理，您可以使用NgRx項目。它的靈感來自 Rex，但它是專門為 Angular 創建的。
與 Vue 和 React 的情況一樣，您可以將許多現成的組件導入到您的項目中。與 Angular 略有不同的是，Angular Material項目中有許多官方組件。這是 Google 的一個官方項目，為 Angular 應用程序提供 Material Design 組件。
您可以使用NativeScript在 Angular 中構建跨平台移動應用程序。它也支持 Vue，但 Angular 支持更成熟。
Angular 是著名的 MEAN 堆棧的一部分，它將 Angular 與 MongoDB、ExpressJS 和 NodeJS 相結合。與 MERN 堆棧類似，它的前端和後端都完全依賴 JavaScript。
Angular、React 和 Vue 都可用於開發漸進式 Web 應用程序，也稱為 PWA。
PWA 不是移動應用程序，而是 Web 應用程序，智能手機用戶可以將其添加為主屏幕的快捷方式，並提供類似於原生移動應用程序的外觀和感覺。
您還可以為每個框架找到高級模板和預制應用程序，但 Angular 和 React 比 Vue 提供更多高級選項。
在選擇框架或庫時，您還需要考慮性能。
在許多情況下，您不必擔心性能，尤其是在構建小型項目時。然而，項目的范圍和復雜性越大，性能就會（並且將會）成為一個問題。
重要的是要注意，在 Web 性能方面，開發質量和遵循最佳實踐比框架的選擇更重要。
但由於存在一些性能指標和差異，我將研究它們並解釋每個指標如何影響您的開發工作。
JS 框架基準測試的結果表明，它們在大多數基準測試中都表現得相當好，例如在表中創建或附加行。
正如你在上面看到的，Vue 在選擇行時比 Angular 和 React 慢得多。另一方面，Angular 和 React 在交換行方面效率不高。
這些是渲染基準中唯一的實質性差異 - 在大多數情況下，不會產生明顯的結果。由於選擇行是比交換行更常見的功能，我想說這個基準測試將 Vue 排在第三位，僅次於 Angular 和 React 並列第一。
在內存和啟動時間方面，React 和 Vue 得分很好，但 Angular 稍慢。Angular 啟動一個基本腳本可能需要 150 毫秒，並且需要更多內存才能運行。
谷歌 Chrome 實驗室的Perf Track顯示了來自數千個網站的生產數據。這些統計數據受許多其他因素的影響，而不僅僅是選擇的框架，讓我們看看數字。
與 Angular 相比，Vue 和 React 網站在這個指標上的排名更高，Angular 需要更多時間來啟動並向用戶呈現內容。
在渲染完整頁面的三個框架中，Angular 也是最慢的，只有 27% 的 Angular 網站得分在可接受的范圍內。
對於所有三個框架，超過 80% 的網站都在第一次輸入延遲的可接受范圍內，這顯示了用戶可以與頁面交互所需的時間。
迄今為止，最輕量級的應用程序是使用 Vue 開發的應用程序，68% 的 Vue 應用程序載入的 JavaScript 不到 1MB。另一方面，Angular 和 React 應用程序往往具有更大的代碼大小。
您可以從這些數字中看到趨勢，但您不應該太快得出結論。例如，對於最後一張圖，可以解釋為 Vue 用於開發更輕量級的應用程序，而 Angular 用於更大的項目。
統計數據可以幫助指導您做出正確的決定，但您不能使用它們來證明一個框架比另一個更快或更好。
對於更高級的應用程序，使用的前端框架應該能夠執行一些提高性能並且可以更好地擴展的任務。
兩項關鍵技術是伺服器端渲染 (SSR) 和虛擬化。
React 支持使用官方ReactDOMServer包進行伺服器端渲染。對於虛擬化，您可以使用名為React Virtualized的流行第三方工具。
Vue 中也支持伺服器端渲染以及官方的SSR 包。此外，您還可以使用基於 Vue 構建並支持 SSR的Nuxt.js框架。
不幸的是，Vue 中的虛擬化選項並不是那麼強大。在我看來，Vue Virtual Scroll List是虛擬滾動的最佳解決方案，但它有點問題，不如 React 和 Angular 的選項穩定。
Angular 擁有SSR的官方Angular Universal包，以及用於虛擬滾動和高效渲染大型列表的官方組件。
學習這些框架有多容易？
要回答這個問題，我們需要查看每個框架的復雜性及其引入的概念。
在最基本的用例中，React 是三個框架中最不復雜的。那是因為你只需要導入庫，然後你就可以用幾行代碼開始編寫你的 React 應用程序。
但是除了 Hello World 示例之外，大多數 React 應用程序都是基於組件的，而不僅僅是在頁面上呈現一些元素。
一些開發人員對 React 感到奇怪或困難的一件事是，學習 JSX 是一條單行道。您也可以使用原始 JavaScript，但由於大多數 React 開發人員使用 JSX，學習它幾乎是不可避免的。
這是使 React 的學習曲線變得更陡峭的主要因素，但除此之外，對於了解 JavaScript 並理解 Web 開發概念的開發人員來說，它是一個易於學習的庫。
Vue 的設置比 React 稍微復雜一些。你可以將它用作一個庫來定義你可以在整個 HTML 中使用的組件——但與 React 類似，這不是大多數項目的構建方式。
大多數 Vue 項目都有一個命名的根組件App.vue和一些用於顯示各種內容的子組件。
說到語法，你唯一需要學習的新東西就是 Vue 的模板語法，如果你了解 HTML，這很容易掌握。基本的指令，如v-if和v-for有條件的渲染和列表的渲染，很容易理解即使是初學者。
此外，Vue 的單文件組件將所有前端代碼保存在一個地方，便於組織新項目。
在我看來，Vue 是最容易學習的，因為它的簡單和直觀的語法。
Angular 擁有三者中最復雜的項目結構，而且由於它是一個成熟的前端框架，因此它依賴的概念更多。
除了組件，Angular 還支持模塊和服務。它希望您以特定的方式編寫和設計代碼庫，從而使您的項目在擴展時更易於維護。
至於語法，由於 Angular 最適合與 TypeScript 配合使用，因此在構建 Angular 項目時了解 TypeScript 非常重要。
與 Vue 一樣，您還必須熟悉類似 HTML 的語法，以便您可以開始使用 Angular 編寫新的 UI 功能。
在我看來，Angular 對於普通開發者來說是最難學的，因為它更復雜並且依賴於 TypeScript。
許多開源項目和框架逐漸被遺忘並無人維護。您是否應該擔心我們在這里討論的任何框架？
盡管我們無法完全預測會發生什麼，但正在進行的開發工作是這些項目 健康 狀況的良好指標。人氣和增長也是預測項目壽命的重要指標，所以讓我們來看看每個框架。
React v17.0已經發布，但令人驚訝的是，它沒有為開發人員提供任何新功能。
主要的變化是這個新版本可以更容易地升級 React 本身。您可以將 React 的某些部分從舊版本升級到新版本，而無需升級整個項目。
如果您的應用程序依賴於隨新版本更改或棄用的功能，您可以保留舊版本以保持此功能有效。此更新使 React 成為一個很好的長期選擇，因為它可以更輕松地與新版本保持同步。
React 的每周 npm 下載量自去年以來增長了 44% 。從絕對數量來看，它仍然是三個項目中下載量最大的。
Vue 3 已於2020 年 9 月發布，它解決了 Vue 2 在大型項目中存在的許多嚴重問題。它引入了受React Hooks啟發的Composition API，可以更輕松地跨組件重用邏輯。
整個項目用 TypeScript 重寫，提高了新 Vue 項目對 TypeScript 的支持，同時也使項目更易於維護。
Vue 3 是一個急需的升級，使 Vue 更適合大型項目。
Vue 的每周下載量自去年以來增長了 87%，使 Vue 成為相對而言增長最快的框架。如果 Vue 能夠保持這種增長速度，那麼它肯定會很快超過 Angular。
Angular 最近推出了Ivy 編譯器。它減少了構建時間，優化了資產，允許更快的測試，並總體上改善了開發人員的體驗。
Angular 團隊每年發布兩次重大更新，其中可能包含新功能，或者只是讓框架跟上新瀏覽器版本的速度。
自去年以來，Angular 的每周下載量增長了約 50% ，因此它仍然是一個受歡迎的項目。
Angular、React 和 Vue 都處於非常活躍的開發階段。他們定期發布新版本並維護現有版本。由於在每種情況下當前的支持水平都很高，因此您可以安全地使用這些框架中的任何一個。
需要注意的是，Angular 的增長沒有以前那麼快，而 Vue—— 盡管它是最近開始的——似乎增長了很多。
如前所述，我們無法預測哪些框架會長期保持相關性，但每個項目背後都有一個偉大的社區，並且在不斷發展。
我這篇文章的目標是解釋架構差異，分解每個框架的優點和缺點，並在適用的地方進行比較。
在進入一個新框架之前，有幾件事情需要考慮。
首先，在選擇新技術時，您團隊的經驗可能是一個決定性因素。
同樣，您必須考慮您所在地區可用的人才，以便您可以為您的項目聘請開發人員。
最後，當涉及到項目本身時，復雜性和范圍也會影響您對框架的選擇。
通過考慮所有關鍵差異，我希望您可以決定哪個是最適合您的目標和需求的前端框架。
(本文由聞數起舞翻譯自Aris Pattakos的文章《Angular vs React vs Vue 2021》，轉載請註明出處，原文鏈接：https://athemes.com/guides/angular-vs-react-vs-vue/)
5. 前端常見面試題
前端開發可能問到的問題：
自我介紹（一定要對項目很熟悉）
ui-app web前端技術體系？
響應式怎麼做？
render跟狀態的差異
類組件的生命周期？
阻止冒泡，阻止事件默認行為
文本垂直居中。 line-height設置為元素高度。
用rece講數組中的對象進行合並
解釋localstorage sessionstorage cookie
eventbus滿足event.on('eventname', callback)
display有幾個值？默認值？
position有幾個值？默認值？
div水平垂直居中？
position有哪些值
react相關問題（概念理解、通訊組件等）、react常用內置
React-router
html+css
頁面增刪改查
position的值 absolute relative fixed static
工作中是怎麼聯調和上線的（現場想合適的前後端聯調方式，能和webpack環境切換聯系起來）
antd的Form shouldUpdate增量更新方式，性能優化。
對Hooks的理解
3:操作dom點擊事件向伺服器上傳數據，在上傳未完成之前不可重復操作事件
4:日期格式化，日期不足前兩位補0（2021-06-06 06:06:00）
用css寫一個布局，左側固定寬度，右側自適應
你看
6. unitysend需要hook嗎
需要。
Hook 本質就是 JavaScript 函數，但是在使用它時需要遵循兩條規則。我們提供了一個 linter 插件來強制執行這些規則。
只在最頂層使用 Hook
不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層以及任何 return 之前調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確。(如果你對此感到好奇，我們在下面會有更深入的解釋。)
只在 React 函數中調用 Hook
**不要在普通的 JavaScript 函數中調用 Hook。**你可以：
在 React 的函數組件中調用 Hook
在自定義 Hook 中調用其他 Hook
遵循此規則，確保組件的狀態邏輯在代碼中清晰可見。
ESLint 插件
我們發布了一個名為 eslint-plugin-react-hooks 的 ESLint 插件來強制執行這兩條規則。如果你想嘗試一下，可以將此插件添加到你的項目中：
我們打算後續版本默認添加此插件到 Create React App 及其他類似的工具包中。
npm install eslint-plugin-react-hooks --save-dev
1
1
// 你的 ESLint 配置
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 檢查 Hook 的規則
"react-hooks/exhaustive-deps": "warn" // 檢查 effect 的依賴
}
}
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
說明
正如我們之前學到的，我們可以在單個組件中使用多個 State Hook 或 Effect Hook
function Form() {
// 1. Use the name state variable
const [name, setName] = useState('Mary');
// 2. Use an effect for persisting the form
useEffect(function persistForm() {
localStorage.setItem('formData', name);
});
// 3. Use the surname state variable
const [surname, setSurname] = useState('Poppins');
// 4. Use an effect for updating the title
useEffect(function updateTitle() {
document.title = name + ' ' + surname;
});
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
那麼 React 怎麼知道哪個 state 對應哪個 useState？答案是 React 靠的是 Hook 調用的順序。因為我們的示例中，Hook 的調用順序在每次渲染中都是相同的，所以它能夠正常工作
// ------------
// 首次渲染
// ------------
useState('Mary') // 1. 使用 'Mary' 初始化變數名為 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState('Poppins') // 3. 使用 'Poppins' 初始化變數名為 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新標題
// -------------
// 二次渲染
// -------------
useState('Mary') // 1. 讀取變數名為 name 的 state（參數被忽略）
useEffect(persistForm) // 2. 替換保存 form 的 effect
useState('Poppins') // 3. 讀取變數名為 surname 的 state（參數被忽略）
useEffect(updateTitle) // 4. 替換更新標題的 effect
// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
只要 Hook 的調用順序在多次渲染之間保持一致，React 就能正確地將內部 state 和對應的 Hook 進行關聯。但如果我們將一個 Hook (例如 persistForm effect ) 調用放到一個條件語句中會發生什麼呢？
// 🔴 在條件語句中使用 Hook 違反第一條規則
if (name !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', name);
});
}
1
2
3
4
5
6
1
2
3
4
5
6
在第一次渲染中 name !== '' 這個條件值為 true，所以我們會執行這個 Hook。但是下一次渲染時我們可能清空了表單，表達式值變為 false。此時的渲染會跳過該 Hook，Hook 的調用順序發生了改變：
useState('Mary') // 1. 讀取變數名為 name 的 state（參數被忽略）
// useEffect(persistForm) // 🔴 此 Hook 被忽略！
useState('Poppins') // 🔴 2 （之前為 3）。讀取變數名為 surname 的 state 失敗
useEffect(updateTitle) // 🔴 3 （之前為 4）。替換更新標題的 effect 失敗
1
2
3
4
1
2
3
4
React 不知道第二個 useState 的 Hook 應該返回什麼。React 會以為在該組件中第二個 Hook 的調用像上次的渲染一樣，對應的是 persistForm 的 effect，但並非如此。從這里開始，後面的 Hook 調用都被提前執行，導致 bug 的產生。
這就是為什麼 Hook 需要在我們組件的最頂層調用。如果我們想要有條件地執行一個 effect，可以將判斷放到 Hook 的內部：
useEffect(function persistForm() {
// 👍 將條件判斷放置在 effect 中
if (name !== '') {
localStorage.setItem('formData', name);
}
});
1
2
3
4
5
6
1
2
3
4
5
6
注意：如果使用了提供的 lint 插件，就無需擔心此問題。 不過你現在知道了為什麼 Hook 會這樣工作，也知道了這個規則是為了避免什麼問題。
打開CSDN，閱讀體驗更佳
React Hook介紹（三）: Hook必須遵守的兩個規則
一、兩個強制性規則： (一）只在最頂層使用 Hook 記住別在循環，條件或嵌套函數中定義即可，因為hook它必須按順序執行，它對state的控制才正確。 （二）只在 React 函數中調用 Hook： 不要在普通的 JavaScript 函數中調用 Hook，即只能在React的函數組件中調用，另外也可以在自定義hook中調用其它的hook. 二、安裝ESLink插件： 為了保證Hook開發中符合以上2個規則要求，可以在開發工具中安裝：eslint-...
繼續訪問
React Hooks
文章目錄React Hooks概述由來基本語法Hooks的規則構建自己的hooks自定義Hooks在 Hooks 之間傳遞信息代碼對比Hooks API參考鏈接 React Hooks概述 由來 Hooks 允許您在不更改組件層次結構的情況下重用有狀態邏輯。 Hooks允許您根據相關內容（例如設置訂閱或獲取數據）將一個組件拆分為較小的函數，而不是基於生命周期方法強制拆分。您還可以選擇使用 red...
繼續訪問
Hook 規則以及自定義Hook
文章目錄Hook規則只在最頂層使用 Hook只在 React 函數中調用 Hook自定義Hook Hook規則 只在最頂層使用 Hook 不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確 只在 React 函數中調用 Hook 不要在普通的 JavaScript 函數中調用
繼續訪問
[React Hooks 翻譯] 5-8 Hook規則
鉤子是JavaScript函數，但在使用它們時需要遵循兩個規則。我們提供了一個 linter 插件來自動執行這些規則 只在最頂層調用Hook 不要在循環、條件和嵌套的函數中調用Hook。 遵循此規則可以確保每次組件render時都以相同的順序調用Hook。這是React能在多個useState和useEffect之間正確保存Hook的state原因。 （下面將深入解釋。） 只在React函數和自定...
繼續訪問
26【React基礎-5】React Hook
hook出現的意義 hook是react 16.8版本才增加的知識，它出現的目的就是讓我們可以在函數組件中使用很多類組件中才有的特性，例如state、生命周期等。 hook簡介 hook說白了其實就是一些react中特殊的函數，只不過這些函數允許我們通過鉤子的形式鉤入一些react的特性，例如我們想要在函數組件中使用state的話就不用將其轉為類組件，直接使用useState()這個hook函數即可；如果想要在函數組件中使用類似於類組件的生命周期這些函數的話，直接使用useEffect()這個h.
繼續訪問
理解 Hook 規則
Hook 本質就是 JavaScript 函數，但是在使用它時需要遵循兩條規則。只在最頂層使用 Hook不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最...
繼續訪問
React Hook 基本使用規則
React Hook 基本使用規則 Hook 本質就是 JavaScript 函數，但是在使用它時需要遵循兩條規則。 1.只在最頂層使用 Hook 不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層以及任何 return 之前調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確。 2.只在 React 函數中調用 Hook 不要在普通
繼續訪問
滑動窗口求最大值 leetcode 59
滑動窗口最大值問題 利用遞減隊列實現 Dequeue dequeue = new LinkedList<>(); 遞減隊列方法說明 peekFirst獲取隊頭元素 pollFirsr隊頭元素出隊 offerLast == add在隊尾插入新元素 public int[] maxSlidingWindow(int[] nums, int k) { if(nums.length==0){ return new int[0]; }
繼續訪問
react的Hook使用的規則（注意事項）
只在最頂層使用 Hook 不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確。(如果你對此感到好奇，我們在下面會有更深入的解釋。) 只在 React 函數中調用 Hook 不要在普通的 JavaScript 函數中調用 Hook。你可以： ✅ 在 React 的函數組件中調用 Hoo
繼續訪問
為什麼不能再循環，條件或嵌套函數中調用 React Hook
React 官網介紹了 Hook 的這樣一個限制： 不要在循環，條件或嵌套函數中調用 Hook， 確保總是在你的 React 函數的最頂層以及任何 return 之前調用他們。遵守這條規則，你就能確保 Hook 在每一次渲染中都按照同樣的順序被調用。這讓 React 能夠在多次的 useState 和 useEffect 調用之間保持 hook 狀態的正確。(如果你對此感到好奇，我們在下面會有更深入的解釋。) 這個限制在開發中也確實會時常影響到我們的開發體驗，比如函數組件中出現 if 語句提前 return
繼續訪問
hook技術--優化代碼hook
. 1.簡介 在代碼hook中,由於頻繁的進行hook和unhook,而且又加上多線程的一些不可靠的因素,會使程序執行效率降低而且可能會導致錯誤,即 多線程對其hook和unhook導致不穩定的可能性增加, 因此需要找一種不需要頻繁進行hook和unhook的方法. 而windows的一些API提供了一種很好的優化方式. 即API代碼以mov edi,edi 指令開頭,這條執行佔了2個位元組...
繼續訪問
react hook（基礎詳解）
首先我們知道Hook是可以100%向下兼容的，就是說即便在你以前的代碼中加入hook寫法也沒有問題，同時提供了一個更直接的API包括props， state，context，refs以及生命周期，hook編寫時使用的代碼量也會更少，但這也是一個過渡，hook的使用去掉了class的概念，雖然以前的寫法依舊可行，但新增hook的同時官方也表示沒有計劃移除class，這對程序員來說是很友好的，但react更推薦用戶使用hook來編寫代碼 首先我們看一下state在傳統和hook中的使用方式區別 首先演示.
繼續訪問
React Hook規則
Hook 本質是 JavaScript 函數，但在使用的時候它有著它需要遵循的規則： 只在最頂層使用 Hook，這能夠讓 React 在多次的 useState 和 useEffect 調用中保持 hook 的狀態正確。 只在 React 函數中調用 Hook，也就是說在 React 的函數組件中調用 Hook，還有一點是在自定義 Hook 中調用其他 Hook。 ...
繼續訪問
React學習筆記（八）--- HooK
一、簡介 在之前的學習中，我們了解到只有類組件中才能使用 state，函數組件是無法使用的。但Hook的出現，改變這種情況，Hook是React 16.8 版本的新增特性，可以讓我們在函數組件中使用state、生命周期以及refs、context等其他相關特性。而且Hook可以讓我們在不更改組件結構的前提下復用狀態邏輯，使得在組件間共享Hook變得十分便利。 簡單來說，Hook就是一些React中封裝好的state以及生命周期、refs等特性的方法，本質就是 JavaScript 函數。除了Re
繼續訪問
深入理解React Hooks
前言：Hook 是 React 16.8的新增特性。它可以讓你在不編寫 class 的情況下使用state以及其他的 React 特性。即react hook只存在於函數組件中，在類組件中不受用. 1.首先為什麼要使用Hook？ 動機 Hook 解決了我們五年來編寫和維護成千上萬的組件時遇到的各種各樣看起來不相關的問題。無論你正在學習 React，或每天使用，或者更願嘗試另一個和 React 有相似組件模型的框架，你都可能對這些問題似曾相識。 痛點問題： 1.在組件之間復用狀態邏輯很難 a.之前的解決方案是
繼續訪問
最新發布 React hooks的規則
不要再循環語句、條件語句或者嵌套函數中聲明hooks。相反，在任何返回之前，總是在React函數的頂層聲明hook。通過遵循此規則，您可以確保在每次呈現組件時以相同的順序調用hook。這使得React能夠在多個useState和useEffect調用之間正確保存hook的狀態。(如果你感到好奇，我們將在下面深入解釋。)如之前所述，我們可以在單一組件中聲明多個state或者Effect 那麼React如何知道哪個狀態對應於哪個useState調用呢?答案是React依賴於hook的調用順序。我們的例子之所以有
繼續訪問
前端學習-React Hook(鉤子)
一.概述 1.什麼是 Hook hook（鉤子）是一種特殊的消息處理機制，它可以監視系統或者進程中的各種事件消息，截獲發往目標窗口的消息並進行處理。 1.1 Hook 例子 函數記錄日誌、節流、緩存 Windows 窗口消息攔截 鍵盤事件攔截（木馬和外掛） 流量識別分析 1.2 React Hook 我們可以通過 Hook 把需要的狀態、副作用方法 「鉤」 進來，放到函數內部使用。讓原來呆板的 React 函數擁有狀態和生命周期。 2. Hook 出現的意義 函數一等公民 - 函數式編程
繼續訪問
hooks 系列六：hook 規則
快來加入我們吧！ "小和山的菜鳥們"，為前端開發者提供技術相關資訊以及系列基礎文章。為更好的用戶體驗，請您移至我們官網小和山的菜鳥們 ( https://xhs-rookies.com/ ) 進行學習，及時獲取最新文章。 "Code tailor" ，如果您對我們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公眾號，與我們取的聯系，您也可以在微信上觀看我們的文章。每一個建議或是贊同都是對我們極大的鼓勵！ Hooks 使用規則 Hook 是 React 16.8 的新增特性。它可以讓你在不編寫
繼續訪問
【React】HOOK的使用規則
什麼是HOOK? 我們都知道，在react的函數組件中，是不能維護state的，函數組件也沒有生命周期。而HOOK的出現，使得函數組件可以維護state，也可以擁有生命周期。 HOOK使用規則 （1）只能在函數最外層調用HOOK。不要在循環、條件語句或子函數中調用useState、useEffect等。 （2）只能在React函數組件或者自定義HOOK中調用HOOK，不能在其他JavaScript函數中調用。 useState const [state, setState] = useStat.
繼續訪問
react.js
javascript
前端
7. 2022前端開發面試記錄（深圳篇）
2022年來到深圳，感覺到了與之前所在城市的差異，心裡多少有點落差。雖然時機不太對吧，但是相信一切都會好起來的，給自己加油呀！
整理了一些面試被問到的問題，雖然很多是無效面試，但是我也強行問了面試官，從他們的回答中猜測了一下他們關注的面試點，所以也算是有點收獲吧，只是浪費了很多簡歷和路費，哭唧唧。
——1、區塊鏈——
1-1、vue生命周期；
1-2、vuex屬性；
1-3、用戶開始登錄到登錄成功都發生了什麼；
1-4、git常用的命令；
——2、金融：vue——
筆試：
2-1、深淺拷貝的區別，為什麼會出現深淺拷貝，淺拷貝的優勢；
2-2、強制中斷 foreach 遍歷；
2-3、多處組件復用；
2-4、你對前端是什麼概念，前端在整個軟體生態內是什麼角色；
2-5、Vue2 中數據變化但視圖沒有發生同步更新，描述一下出現的場景，解決方式，以及該問題發生的可能原因；
2-6、nextTick 是如何確保開發者能夠獲取到最新的 DOM 狀態的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式開發時，useMemo，useCallback 常用來作為優化的手段。描述一下它們各自的適用場景，以及背後的原理實現?；
2-9、前端從 Jquery 時代演變至如今的三大框架，這種演變的根源是什麼，jquery 解決了什麼問題，如今的三大框架又是為了解決什麼問題出現的？
視頻面試：
2-10、js遍歷樹形結構，每個節點都有一個唯一ID，只能遍歷一次；
2-11、組件封裝的意義；
——3、知識產權：vue2、vue3、ts、react——
3-1、說一說面向對象的理解，包括繼承、封裝、多態等；
3-2、說一說promise；
3-3、webpack優化；
3-4、vuex使用場景；
3-5、描述一下對vue響應式原理的理解；
3-6、vue生命周期；
3-7、父子組件鉤子函數執行順序；
3-8、v-if和v-show；
3-9、js數據類型；
3-10、實現深拷貝；
——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素樣式在生命周期的哪個階段；
4-3、生命周期-修改數據在哪個階段；
4-4、生命周期-destroy裡面會做哪些操作；
4-5、怎麼修改title的內容；
4-6、父子組件傳參的具體寫法；
4-7、v-model的多種寫法；
4-8、js數據類型；
4-9、判斷數組的方法；
4-10、實現左邊固定右邊自適應的布局；
4-11、實現div垂直水平居中；
4-12、flex:1；
4-13、flex詳解；
4-14、call,apply,bind是干什麼的；
——5、新興產業——
5-1、封裝路由，怎麼攔截路由；
5-2、瀏覽器緩存有哪些，又問localStorage和sessionStrorage的區別和應用場景；
5-3、瀏覽器強緩存和協商緩存；
5-4、webpack打包機制，構建過程和配置；
5-5、性能優化方法；
5-6、前端的業務和後端的API是怎麼做到數據實時請求的（問的其實是前端對後端API介面的封裝和管理）；
5-7、computed和watch；
5-8、說了幾個關於大屏的應用場景，有沒有做過，怎麼做的；
——6、某水果：vue2、vue3、ts、各種前沿技術都用——
6-1、怎麼封裝一個組件庫/工具類庫，比如vue封裝過什麼復雜組件，jquery封裝過什麼類庫；
6-2、get和post的區別，傳參格式等；
6-3、promise怎麼用的；
6-4、原型鏈，test()的原型鏈；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥區別，set為什麼能去重；
6-8、項目難點；
——7、醫療健康：vue——
7-1、vue自定義指令配置；
7-2、webpack的理解；
7-3、對node的了解，用過express嗎；
7-4、項目中的拖拽是怎麼做的；
7-5、websocket和socket的區別；
7-6、聽過mqtt嗎，因為沒聽過所以解釋了一下activemq的用法；
7-7、二維地圖的聚合，如果有十萬個點，會做什麼優化；
7-8、地圖實現多個點連成一條線會怎麼做；
7-9、地圖實現一條曲線；
7-10、內網下git怎麼用的；
7-11、openlayers渲染機制；
7-12、父子組件通信方法；
7-13、router中實現攔截；
7-14、對象合並的方法；
7-15、父子組件的生命周期執行順序，渲染階段為什麼會先執行父組件再執行子組件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在項目中的什麼位置找到；
7-18、vue中跳轉頁面的方法；
7-19、mixins用過嗎；
7-20、判斷引用類型的方法；
7-21、js數據類型；
7-22、判斷基本數據類型的方法；
7-23、for in和for of的用法和區別，兩者遍歷的是索引還是屬性值，兩者都可以遍歷對象嗎；
7-24、foreach和map的區別，兩者會不會改變原數組；
7-25、主要用什麼技術棧；
7-26、行內元素和塊級元素的區別，分別都有哪些，行塊級元素有哪些；
7-27、div垂直水平居中，grid知不知道怎麼用；
7-28、splice和slice；
——8、智慧園區：vue2、vue3、ts、uniapp——
8-1、flex了解嗎，flex布局方向，flex:1 0的頁面效果是怎樣的；
8-2、做過移動端嗎，了解uniapp嗎；
8-3、keep-alive；問了一個沒聽明白的，可能和keep-alive有關系；
8-4、vuex中的action；不用vuex，怎麼代替vuex；
8-5、promise.all和promise.on；
8-6、防止表單重復提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎麼控制時間；
8-10、vue中的data為什麼要設計成一個函數；
——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什麼的；
9-2、openlayers怎麼用的；
9-3、性能優化；
9-4、spa首屏載入優化；
9-5、bundler.js太大，打包怎麼優化；
9-6、加密方式了解多少，比如md5,base64等，一大堆沒聽過的；
9-7、冒泡排序的實現原理；
9-8、js設計模式；
——10、某快遞公司外包——
10-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
10-2、項目相關的，聊天怎麼做的，拖拽怎麼做的，拖拽的數據怎麼渲染的，拖拽重疊怎麼處理的；
10-3、js設計模式；
——11、三維：vue、cesium——
11-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
11-2、openlayers怎麼用的，發布過wms嗎，發布流程是怎樣的；
11-3、openlayers轉換經緯度的方法名是什麼；
11-4、cesium常用的函數；
11-5、vue數據雙向綁定原理；
11-6、Vue中data屬性如果改變一個數組的下標，會不會馬上發生變化，不變化可以怎麼解決
11-7、數組常用方法有哪些；
11-8、 map和filter的區別；
11-9、es6常用的方法；
11-10、父子組件通信，兄弟組件通信；
11-11、new具體進行了什麼操作；
——12、醫療：vue、angular——
12-1、js渲染機制和運行機制；
12-2、vue數據綁定原理；
——13、建設行業：vue、uniapp——
筆試：
13-1、||與&運算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，列印b和c，應該是深淺拷貝；
13-4、實現font-size:12；
13-5、介面路徑，給一個地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ，根據url請求介面路徑寫出完整路徑，』/ geturl.do 』，』 geturl.do 』，』../ geturl.do 』；
13-6、微信小程序流程和主要文件；
13-7、獲取url參數及內容；
13-8、$(function(){}) / (function(){}) / (function(){})()的區別；
13-9、前端優化方案；
面試：
13-10、項目難點；
13-11、git工作流；
13-12、jquery項目會不會用webpack打包；
13-13、webpack優化；
13-14、web優化；
——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的區別；
14-3、cookie和session的區別；
14-4、vue生命周期；
14-5、數據請求寫在哪個生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的開發流程；
14-8、uniapp的開發流程和坑；
14-9、uniapp滑動問題，下滑切換視頻不生效，一般是什麼原因；
14-10、uniapp載入速度慢，點擊載入圖片速度太慢，一般是什麼原因；
——15、企業平台某外包：vue，node，性能優化——
15-1、說一說websocket；
15-2、vue數據雙向綁定原理；
15-3、項目難點；
15-4、對mvvm、mvc、mvp等的理解；
15-5、vue的常見指令；
15-6、computed和watch；
15-7、class和style怎麼綁定；
15-8、ajax和axios的區別；
15-9、axios攔截器，axios的post請求；
15-10、對前端渲染，服務端渲染的理解；
——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue組件通信方法；
16-3、js的繼承；
16-4、oracle、mysql、sqllite的區別；
16-5、oracle連表查詢；
16-6、openlayers項目場景；
16-7、cesium項目場景；
——17、租房：jquery+layui，vue2——
17-1、筆試：
17-2、foo列印題；
17-3、this列印題；
17-4、變數提升列印題；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把數組扁平化成一個數組，並進行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出現的位置；
17-7、面試：主要問項目
——18、跑腿：vue2，vue3+ts——
18-1、對html5語義化的理解；
18-2、css實現一個三角形；
18-3、css怎麼實現0.5px的線，為什麼有這種需求，涉及到兼容性問題；
18-4、怎麼解決變數提升的問題；
18-5、es6新增了哪些定義變數的方式；
18-6、const定義的變數可以被修改嗎；
18-7、map和filter的區別，會改變原數組嗎；
18-8、es6去重的方法；
18-9、談一談對promise的理解；
18-10、除了鏈式調用，promise還可以怎麼處理同步請求(async/await)；
18-11、對vue響應式原理的理解，核心是什麼；
18-12、對vue生命周期每個階段的理解；
18-13、為什麼要用key，key有什麼作用；
18-14、v-if和v-show；
18-15、Vue中data為什麼是一個函數；
18-16、vue各場景下的傳值方式有哪些，比如父子組件，兄弟組件，祖孫組件；
18-17、對vuex的理解和使用場景；
18-18、vue常見修飾符；
18-19、Vue3用過嗎(因為沒用過，所以就只針對響應式原理說了一下vue3和vue2的區別)；
——19、實業：jquery，vue2，vue3——
筆試：需要解釋
19-1、html5新標簽，css3新特性；
19-2、js+css3實現某元素以50px每秒的速度左移100px；
19-3、css實現左中右布局，不改變文檔流；
19-4、js兼容性有哪些，以及常見的解決方案；
19-5、描述一下事件循環機制eventloop，eventloop解決了什麼問題；
19-6、給了一個題，大概是後端返回的介面數據，data的格式有很多，比如null，對象，數組，字元串等，怎麼處理這種問題；
19-7、前端性能優化方法，首屏頁面怎麼優化；
19-8、用js寫一個方法實現數據去重並排序(用es5和es6+實現)；
19-9、給定一個數組，把數組中為0的往後排，其他值按順序排序; （示例：[1,0,4,0,5,3]轉換結果為[1,3,4,5,0,0]）
19-10、用0，1，2代表紅黃藍三種顏色，實現以下排序，不能用array.sort實現;（示例：[0,1,0,2,0,1,2]轉換結果為[0,0,0,1,1,2,2]）
面試：
19-11、flex布局；flex:1對應的屬性；
19-12、講一下原型鏈； proto 和prototype有什麼區別；字元串有沒有原型；給定一個str，str.test()調用的誰的test方法；
19-13、講一下閉包；什麼情況下才能算是閉包；形成閉包的條件；列了三個題讓你判斷是不是閉包；
19-14、v-if和v-show是干什麼的；應用場景有哪些；給定一對父子組件，默認值是false，另外有一個ajax請求，值發生了以下變化（false true false true true），在v-show和v-if中，父子組件的哪個階段里會請求ajax；
19-15、computed的實現原理，怎麼實現一個computed；
19-16、css中，transform，margin，position的都是怎麼渲染的，渲染機制是什麼；amd，cmd，commonjs了解嗎；