㈠ 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了解嗎；
㈡ 前端基礎必備知識有哪些
基礎：HTML/CSS/JavaScript
框架：VUE
UI：elementUI
㈢ vue前端面試題有哪些呢
文章中給你列舉了部分的面試題，這些都是公司面試常遇到的，還有需要的還可以自己去查閱一下資料
1、active-class是哪個組件的屬性？嵌套路由怎麼定義？
答：vue-router模塊的router-link組件。
2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
3、vue-router有哪幾種導航鉤子？
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
4、scss是什麼？安裝使用的步驟是？有哪幾大特性？
答：預處理css，把css當前函數編寫，定義變數,嵌套。 先裝css-loader、node-loader、sass-loader等載入器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion，再加多一個模塊：mole裡面test、loader
4.1、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個mole屬性
第四步：然後在組件的style標簽加上lang屬性 ，例如：lang=」scss」
有哪幾大特性:
1、可以用變數，例如（$變數名稱=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
答：基於vue的前端組件庫。npm安裝，然後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from 『mint-ui』。組件一：Toast(『登錄成功』)；組件二：mint-header；組件三：mint-swiper
6、v-model是什麼？怎麼使用？ vue中標簽怎麼綁定事件？
答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
7、axios是什麼？怎麼使用？描述使用它實現登錄功能的流程？
答：請求後台資源的模塊。npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。後台如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中
8、axios+tp5進階中，調用axios.post(『api/user』)是進行的什麼操作？axios.put(『api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。
9、什麼是RESTful API？怎麼使用?
答：是一個api的標准，無狀態請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標准有：.post .put .delete
10、vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
11、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
答：全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
13、說出至少4種vue當中的指令和它的用法？
答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
14、vue-router是什麼？它有哪些組件？
答：vue用來寫路由一個插件。router-link、router-view
15、導航鉤子有哪些？它們有哪些參數？
答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數：有to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種
16、Vue的雙向數據綁定原理是什麼？
答：vue.js 是採用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變數替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)裡面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。
ps：16題答案同樣適合」vue data是怎麼實現的？」此面試題。
17、請詳細說下你對vue生命周期的理解？
答：總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。
創建前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
18、請說下封裝 vue 組件的過程？
答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。
19、你是怎麼認識vuex的？
答：vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。
20、vue-loader是什麼？使用它的用途有哪些？
答：解析.vue文件的一個載入器，跟template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
21、請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件
22、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import smithButton from 『../components/smithButton.vue』
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
23、聊聊你對Vue.js的template編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合並option。
然後，AST會經過generate（將AST語法樹轉化成render funtion字元串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標簽名、子節點、文本等等）
㈣ 史上最全前端vue面試題！推薦收藏
1.為什麼會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。
解決方法：安裝插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。
② 然後再通過actions的commit來出發mutations來修改數據。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。
④ 最後由store觸發每一個調用它的組件更新。
3.vuex是什麼？怎麼使用？
vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的數據在頁面刷新後數據消失怎麼解決？
使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？
假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用
8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。
9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟組件傳值
$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：
使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄
11.組件跨級傳值
$attrs a->b->c
$listeners 監聽
12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync
13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。
15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。
16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。
17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。
19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。
20.vue獲取dom？
ref
21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。
23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。
25.如何讓scss只在當前組件中起作用？
㈤ 前端工程師必問面試題vue路由模式路由守衛
vue的路由模式一共有兩種，分別是哈希和history，他們的區別是hash模式不會包含在http請求當中，並且hash不會重新載入頁面，而使用history模式的話，如果前端的url和後端發起請求的url不一致的話，會報404錯誤，所以history的原理是利用html5新增的兩個特性方法，分別是psuhState和replaceState來完成的，以上就是對vue路由的理解。
路由的導航守衛 又叫做路由的鉤子函數（生命周期函數）
就是在跳轉頁面的時候把路由欄下來，做一些操作在放行，vue一共提供了三種路由守衛。
第一種是全局守衛
beforeEach路由進入之前
afterEach路由進入之後
第二種 組件內守衛
beforeRouteEnter 路由進入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由離開之前
第三種 路由獨享守衛
beforeEnter 路由進入之前
分別是 to from next
next 這個參數 在路由3.x版本的時候，是必須的
但是到了路由4.x版本的時候next參數變成可選的了
一般來說vue2搭配 3.x的路由
vue3搭配 4.x 的路由
比如說購物車頁面只有登陸的才能訪問，我們可以用組件級守衛購物車頁面，如果已經登陸存有token 的話，就繼續訪問這個頁面，如果沒有登陸的話就會跳轉到登陸頁面。
在項⽬中我們經常使⽤路由守衛實現⻚⾯的鑒權. ⽐如:當⽤戶登錄之後,我們會把後台返回的token以及⽤戶信息保存到vuex
和本地,當⻚⾯進⾏跳轉的時候,我們會在路由守衛⾥⾯獲取vuex⾥⾯的token,如果token存在的話,我們則使⽤next讓他進⼊要
跳轉的⻚⾯,如果token不存在的話我們使⽤next⽅法讓他回到登錄⻚
以上就是我對vue路由守衛的理解。
⾸先v-if和v-show都是控制元素的顯示與隱藏, 不過v-if控制元素的顯
示和隱藏的時候會刪除對⽤的dom元素,當每⼀個顯示的時候,都會重新創建dom和渲染. ⽽v-show則是通過css的display:none
和display:block來控制元素的顯示與隱藏. v-if⽐較耗費性能,所以我們涉及到頻繁的顯示隱藏操作我們建議使⽤v-show,如果不
是頻繁操作的話,我們可以v-if
在項⽬中我會經常使⽤v-if和v-show,⽐如我們在搜索功能的時候,他有⼀個歷史記錄,這個時候我們根據是否有搜索的結果來判
斷歷史記錄的顯示與隱藏,這塊我就可以使⽤v-if ,當然⽤v-show也可以. 以上就是我對v-if和v-show的理解。
v-for的優先順序⾼. 因為v-for的時候我們才開始渲染dom元素,這個v-if還⽆法進⾏判斷.
v-for和v-if不能同時使⽤,我們可以通過標簽,⽐如div或者template標簽來進⾏包裹,把v-if寫到包裹的標簽上⾯(寫到v-for外⾯)。
⾸先呢,methods是⽤來定義⽅法的區域,methods定義的⽅法需要調⽤才能觸發. 不具備緩存⾏
⽽computed是計算屬性,他依賴於屬性值的變化,當屬性發⽣改變的時候,計算屬性⾥⾯定義的⽅法就會觸發,computed具有緩
存性,依賴屬性值的變化⽽變化.
⽽watch主要是⽤於監聽,不具備被緩存性.依賴於數據變化⽽觸發.
在項⽬中,⽐如我們獲取state的狀態的時候我們會把它放到computed⾥⾯,或者在寫購物⻋數量計算的時候也會使⽤計算屬性.
⽽watch也在項⽬經常使⽤,⽐如我們封裝編輯 和 新增彈窗組件的時候會通過watch來進⾏id判斷我們要顯否要清空表單的數
據.
以上就是我對computed和watch的理解。
㈥ 前端開發者面試必備的3個點
最近是招聘旺季，我也在負責我們公司的招聘，但是面試過程大部分前端面試者給我的感覺思維比較窄，以及陳述問題時候比較亂，整體給人感覺不是理想。下面是我作為一個面試官從三個維度給面試者建議和思考吧。
一.自我介紹
1.自我介紹，可以簡單介紹你畢業什麼學校，什麼專業
2.出來負責的項目，每個項目自己充當的角色
3.每個項目使用前端技術+後端技術
簡單大概的說出來就可以了，不要詳細到你哪年進入公司，哪年離開公司，負責項目做什麼的，說一大通。這個對我們面試官來說，想讓你自我簡單介紹，其實考察點有兩方面：
A.面試者的表達能力和概括能力
B.面試者目前掌握什麼技術，做過什麼項目，在項目中的角色來初步判定這個人的能力
二.問題回答
在本人問他們做過項目中，自己感覺挑戰最大的項目是什麼，你在這個項目中做了什麼，遇到什麼問題，怎麼解決這些問題的
1.有些面試者給我的答案直接說沒有比較大的挑戰;這個讓我感覺這個人可能沒有聽懂我的問題，工作那麼多年，難道沒有一個項目可以拿來說的，那我拿什麼來判定你的能力呢?難道憑你幾句話，說我很牛逼的，沒有什麼困難難得到我?我就信任你了，伯樂尋找千里馬都要知道幾個千里馬的特徵吧。所以沒有你也要在面試前准備好自己做過的項目和總結，在項目中自己做了什麼，充當什麼覺得。
2.有些面試者回答這個問題，在介紹項目的時候，很大概的說，還有就是一句話前端都是我做的，這些都是我設計的;這個讓我感覺這個人也沒有聽懂我的意思，我在問你這個問題的時候，肯定是希望你詳細介紹你的項目，這個項目使用者是誰，讓我知道誰在使用這個項目;你負責哪些模塊，哪些組件，那些模塊實現什麼業務邏輯，用到什麼技術，這個能讓我更加知道你項目的業務，才能從你描述中我知道這類的業務會遇到什麼問題，以及你使用的技術是否合理，能讓我更加判定你的能力，才能更好的提出問題，才能更好的面試下去。
3.回答問題的時候不要想到什麼就答什麼，要有陳述性，比如1,xxx;2.yyyyy;3.wwww的陳述，這樣能讓我知道你總結過，表達和陳述上比較清晰，思維好;想到什麼答什麼的，讓我感覺思維可能比較亂，有可能我聽懂了你的表述，但是讓我感覺表達能力有些欠缺。
4.以及在你項目中遇到的問題，你要陳述問題，你是怎麼思考的，而不是針對問題就直接說網路，google就解決了。我們大家都知道，遇到問題都會去網路，google.但在這問題的前提條件是問題是，架構上的問題，還是代碼的bug問題，還是方案上的問題。你至少陳述清楚，是不是還有其他方案，在其他方案中，你為什麼選擇這個方案。這個能讓知道你在面對問題的時候，你是否思考了其他的問題，想得越多，知道能體現出的思維比較發散，遇到問題可以有其他方式解決，而不是死磕一棵樹上。
三.前端技能
前端技能在問到很多面試者的時候感覺自己都懂前端，其實他們只是懂使用js敲代碼而已，很多前端知識，以及前端原理都不懂，只會使用的話，那麼永遠只會走來人家的後面。就那一個比喻來說吧，如果你只是一個會開車的司機，不會修車或者造車，那麼如果哪天車出了毛病，你都不知道，到時候才去學習車的構造原理。或者你會說我直接給維修廠不就可以了，如果維修廠關門了呢怎麼辦。所以我們前端開發人員還是要腳踏實地，不要說我會使用vuejs，react前端框架，問你一個mvvm模式是什麼，你都說不知道，怎麼實現mvvm框架，在不使用別人開發mvvm框架，自己可以開發一個簡單的mvvm框架?前端的開發者問問自己?以我個人的要求，前端開發者必須掌握
1.HTTP協議
2.前端安全
3.常用前端框架的三駕馬車react,vuejs,angularjs目前比較流行的以及jquery(工具庫)的使用
4.前端基礎知識，跨域，es6新語法
5.Nodejs的開發，express，koa等常用框架
6.了解一些資料庫知識
7.能理解封裝業務組件和公用組件
8.前端性能優化
9.前後端分離
如果可以，能掌握更加深層次的知識點：
1.前端架構，設計模式
2.前端工程化開發，測試，打包，發布
3.自己實現前端架構代碼以及開發工具
這些是我近期的一些總結，也希望能給最近正在找工作，最近准備開始轉行前端的小夥伴們一個方向。
在面試前做好准備，找好自己的定位，成功收獲高薪!
㈦ 前端需要哪些知識
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
㈧ 47道基礎的VueJS面試題(附答案)
1、什麼是MVVM框架？它適用於哪些場景？
MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。
在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。
2、active- class是哪個組件的屬性？
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動態路由？
在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。
4、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
5、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
6、mint-ui是什麼？如何使用？
它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。
7、V-model是什麼？有什麼作用？
v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。
8、Vue.js中標簽如何綁定事件？
綁定事件有兩種方式。
第一種，通過v-on指令， 。
第二種，通過@語法糖， input@ click= doLog()/>。
9、vuex是什麼？如何使用？在哪種功能場景中使用它？
vuex是針對 Vue. js框架實現的狀態管理系統。
為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。
使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。
10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
自定義指令包括以下兩種。
它有如下鉤子函數。
鉤子函數的參數如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關指令及其用法如下。
12、Vue-router是什麼？它有哪些組件？
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導航鉤子有哪些？它們有哪些參數？
導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個路由獨享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數。
14、Vue.js的雙向數據綁定原理是什麼？
具體步驟如下。
（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。
（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。
15、請詳細說明你對Vue.js生命周期的理解。
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當使用組件的kep- alive功能時，增加以下兩個周期。
Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。
使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。
17、你是怎樣認識vuex的？
vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。
18、Vue- loader是什麼？它的用途有哪些？
它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。
19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
21、談談你對vue.js的 template編譯的理解。
簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。
詳細步驟如下。
（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。
（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。
ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區別是什麼？
v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。
24、如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。
25、如何創建vue.js組件？
在vue.js中，組件要先注冊，然後才能使用。具體代碼如下
26、如何實現路由嵌套？如何進行頁面跳轉？
路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。
首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。
27、ref屬性有什麼作用？
有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。
注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什麼？
Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。
使用MVVM模式有幾大好處。
（2）組件化開發
（3）指令系統
（4）Vue2.0開始支持虛擬DOM。
但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點。
Vue. js有以下特點。
31、在vue.js中如何綁定事件？
通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。
32、請說明 組件的作用。
當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。
當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。
33、axios是什麼？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。
用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。
34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？
當調用post方法表示在發送post非同步請求。
35、sass是什麼？如何在ue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。
（2）在 webpack. config. js中配置sass載入程序。
（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。
36、如何在 Vue. js中循環插入圖片？
對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。
代碼如下：
㈨ 整理涵蓋很全很廣的前端知識點
HTML、CSS相關
html5新特性、語義化
瀏覽器渲染機制、重繪、重排
網頁生成過程：
重排(也稱迴流): 當 DOM 的變化影響了元素的幾何信息( DOM 對象的位置和尺寸大小)，瀏覽器需要重新計算元素的幾何屬性，將其安放在界面中的正確位置，這個過程叫做重排。 觸發：
重繪： 當一個元素的外觀發生改變，但沒有改變布局,重新把元素外觀繪制出來的過程，叫做重繪。 觸發：
重排優化建議：
transform 不重繪，不迴流 是因為 transform 屬於合成屬性，對合成屬性進行 transition/animate 動畫時，將會創建一個合成層。這使得動畫元素在一個獨立的層中進行渲染。當元素的內容沒有發生改變，就沒有必要進行重繪。瀏覽器會通過重新復合來創建動畫幀。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 這一術語是用來設計和布局時使用。 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
css樣式優先順序
!important>style>id>class
什麼是BFC？BFC的布局規則是什麼？如何創建BFC？BFC應用？
BFC 是 Block Formatting Context 的縮寫，即塊格式化上下文。 BFC 是CSS布局的一個概念，是一個環境，裡面的元素不會影響外面的元素。 布局規則：Box是CSS布局的對象和基本單位，頁面是由若干個Box組成的。元素的類型和display屬性，決定了這個Box的類型。不同類型的Box會參與不同的 Formatting Context 。 創建：浮動元素 display：inline-block position:absolute 應用: 1.分屬於不同的 BFC 時,可以防止 margin 重疊 2.清除內部浮動 3.自適應多欄布局
DOM、BOM對象
BOM（Browser Object Model） 是指瀏覽器對象模型，可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。 使 JavaScript 有能力與瀏覽器"對話"。 DOM （Document Object Model） 是指文檔對象模型，通過它，可以訪問 HTML 文檔的所有元素。 DOM 是 W3C （萬維網聯盟）的標准。 DOM 定義了訪問 HTML 和 XML 文檔的標准： "W3C 文檔對象模型（DOM）是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標准被分為 3 個不同的部分：
什麼是 XML DOM ？ XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。 什麼是 HTML DOM？ HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
JS相關
js數據類型、typeof、instanceof、類型轉換
閉包(高頻)
閉包是指有權訪問另一個函數作用域中的變數的函數 ——《JavaScript高級程序設計》
當函數可以記住並訪問所在的詞法作用域時，就產生了閉包，
即使函數是在當前詞法作用域之外執行 ——《你不知道的JavaScript》
原型、原型鏈(高頻)
原型: 對象中固有的 __proto__ 屬性，該屬性指向對象的 prototype 原型屬性。
原型鏈: 當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那麼它就會去它的原型對象里找這個屬性，這個原型對象又會有自己的原型，於是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來說都是 Object.prototype 所以這就是我們新建的對象為什麼能夠使用 toString() 等方法的原因。
特點: JavaScript 對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
this指向、new關鍵字
this 對象是是執行上下文中的一個屬性，它指向最後一次調用這個方法的對象，在全局函數中， this 等於 window ，而當函數被作為某個對象調用時，this等於那個對象。 在實際開發中， this 的指向可以通過四種調用模式來判斷。
new
作用域、作用域鏈、變數提升
繼承(含es6)、多種繼承方式
（1）第一種是以 原型鏈的方式來實現繼承 ，但是這種實現方式存在的缺點是，在包含有引用類型的數據時，會被所有的實例對象所共享，容易造成修改的混亂。還有就是在創建子類型的時候不能向超類型傳遞參數。
（2）第二種方式是使用 借用構造函數 的方式，這種方式是通過在子類型的函數中調用超類型的構造函數來實現的，這一種方法解決了不能向超類型傳遞參數的缺點，但是它存在的一個問題就是無法實現函數方法的復用，並且超類型原型定義的方法子類型也沒有辦法訪問到。
（3）第三種方式是 組合繼承 ，組合繼承是將原型鏈和借用構造函數組合起來使用的一種方式。通過借用構造函數的方式來實現類型的屬性的繼承，通過將子類型的原型設置為超類型的實例來實現方法的繼承。這種方式解決了上面的兩種模式單獨使用時的問題，但是由於我們是以超類型的實例來作為子類型的原型，所以調用了兩次超類的構造函數，造成了子類型的原型中多了很多不必要的屬性。
（4）第四種方式是 原型式繼承 ，原型式繼承的主要思路就是基於已有的對象來創建新的對象，實現的原理是，向函數中傳入一個對象，然後返回一個以這個對象為原型的對象。這種繼承的思路主要不是為了實現創造一種新的類型，只是對某個對象實現一種簡單繼承，ES5 中定義的 Object.create() 方法就是原型式繼承的實現。缺點與原型鏈方式相同。
（5）第五種方式是 寄生式繼承 ，寄生式繼承的思路是創建一個用於封裝繼承過程的函數，通過傳入一個對象，然後復制一個對象的副本，然後對象進行擴展，最後返回這個對象。這個擴展的過程就可以理解是一種繼承。這種繼承的優點就是對一個簡單對象實現繼承，如果這個對象不是我們的自定義類型時。缺點是沒有辦法實現函數的復用。
（6）第六種方式是 寄生式組合繼承 ，組合繼承的缺點就是使用超類型的實例做為子類型的原型，導致添加了不必要的原型屬性。寄生式組合繼承的方式是使用超類型的原型的副本來作為子類型的原型，這樣就避免了創建不必要的屬性。
EventLoop
JS 是單線程的，為了防止一個函數執行時間過長阻塞後面的代碼，所以會先將同步代碼壓入執行棧中，依次執行，將非同步代碼推入非同步隊列，非同步隊列又分為宏任務隊列和微任務隊列，因為宏任務隊列的執行時間較長，所以微任務隊列要優先於宏任務隊列。微任務隊列的代表就是， Promise.then ， MutationObserver ，宏任務的話就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一種非同步通信的方法,從服務端獲取數據,達到局部刷新頁面的效果。 過程：
事件冒泡、捕獲(委託)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
簡述MVVM
MVVM 是 Model-View-ViewModel 縮寫，也就是把 MVC 中的 Controller 演變成 ViewModel。Model 層代表數據模型， View 代表UI組件， ViewModel 是 View 和 Model 層的橋梁，數據會綁定到 viewModel 層並自動將數據渲染到頁面中，視圖變化的時候會通知 viewModel 層更新數據。
談談對vue生命周期的理解？
每個 Vue 實例在創建時都會經過一系列的初始化過程， vue 的生命周期鉤子，就是說在達到某一階段或條件時去觸發的函數，目的就是為了完成一些動作或者事件
computed與watch
watch 屬性監聽 是一個對象，鍵是需要觀察的屬性，值是對應回調函數，主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作,監聽屬性的變化，需要在數據變化時執行非同步或開銷較大的操作時使用
computed 計算屬性 屬性的結果會被緩存，當 computed 中的函數所依賴的屬性沒有發生改變的時候，那麼調用當前函數的時候結果會從緩存中讀取。除非依賴的響應式屬性變化時才會重新計算，主要當做屬性來使用 computed 中的函數必須用 return 返回最終的結果 computed 更高效，優先使用
使用場景 computed ：當一個屬性受多個屬性影響的時候使用，例：購物車商品結算功能 watch ：當一條數據影響多條數據的時候使用，例：搜索數據
v-for中key的作用
vue組件的通信方式
父子組件通信
父->子 props ，子->父 $on、$emit` 獲取父子組件實例 parent、 parent 、children Ref 獲取實例的方式調用組件的屬性或者方法 Provide、inject` 官方不推薦使用，但是寫組件庫時很常用
兄弟組件通信
Event Bus 實現跨組件通信 Vue.prototype.$bus = new Vue() Vuex
跨級組件通信
$attrs、$listeners Provide、inject
常用指令
雙向綁定實現原理
當一個 Vue 實例創建時，Vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher重新計算，從而致使它關聯的組件得以更新。
v-model的實現以及它的實現原理嗎？
nextTick的實現
vnode的理解，compiler和patch的過程
new Vue後整個的流程
思考：為什麼先注入再提供呢？？
答：1、首先來自祖輩的數據要和當前實例的data,等判重，相結合，所以注入數據的initInjections一定要在 InitState 的上面。2. 從上面注入進來的東西在當前組件中轉了一下又提供給後代了，所以注入數據也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：掛載實例。
keep-alive的實現
作用：實現組件緩存
鉤子函數：
原理： Vue.js 內部將 DOM 節點抽象成了一個個的 VNode 節點， keep-alive 組件的緩存也是基於 VNode 節點的而不是直接存儲 DOM 結構。它將滿足條件 （pruneCache與pruneCache） 的組件在 cache 對象中緩存起來，在需要重新渲染的時候再將 vnode 節點從 cache 對象中取出並渲染。
配置屬性：
include 字元串或正則表達式。只有名稱匹配的組件會被緩存
exclude 字元串或正則表達式。任何名稱匹配的組件都不會被緩存
max 數字、最多可以緩存多少組件實例
vuex、vue-router實現原理
vuex 是一個專門為vue.js應用程序開發的狀態管理庫。 核心概念：
你怎麼理解Vue中的diff演算法?
在js中,渲染真實 DOM 的開銷是非常大的, 比如我們修改了某個數據,如果直接渲染到真實 DOM , 會引起整個 dom 樹的重繪和重排。那麼有沒有可能實現只更新我們修改的那一小塊dom而不要更新整個 dom 呢？此時我們就需要先根據真實 dom 生成虛擬 dom ， 當虛擬 dom 某個節點的數據改變後會生成有一個新的 Vnode , 然後新的 Vnode 和舊的 Vnode 作比較，發現有不一樣的地方就直接修改在真實DOM上，然後使舊的 Vnode 的值為新的 Vnode 。
diff 的過程就是調用 patch 函數，比較新舊節點，一邊比較一邊給真實的 DOM 打補丁。在採取 diff 演算法比較新舊節點的時候，比較只會在同層級進行。 在 patch 方法中，首先進行樹級別的比較 new Vnode 不存在就刪除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就執行diff更新 當確定需要執行diff演算法時，比較兩個 Vnode ，包括三種類型操作：屬性更新，文本更新，子節點更新 新老節點均有子節點，則對子節點進行 diff 操作，調用 updatechidren 如果老節點沒有子節點而新節點有子節點，先清空老節點的文本內容，然後為其新增子節點 如果新節點沒有子節點，而老節點有子節點的時候，則移除該節點的所有子節點 老新老節點都沒有子節點的時候，進行文本的替換
updateChildren 將 Vnode 的子節點Vch和oldVnode的子節點oldCh提取出來。 oldCh和vCh 各有兩個頭尾的變數 StartIdx和EndIdx ，它們的2個變數相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置了 key ，就會用 key 進行比較，在比較的過程中，變數會往中間靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一個已經遍歷完了，就會結束比較。
你都做過哪些Vue的性能優化？
你知道Vue3有哪些新特性嗎？它們會帶來什麼影響？
更小巧、更快速 支持自定義渲染器 支持搖樹優化：一種在打包時去除無用代碼的優化手段 支持Fragments和跨組件渲染
模板語法99%保持不變 原生支持基於class的組件，並且無需藉助任何編譯及各種stage階段的特性 在設計時也考慮TypeScript的類型推斷特性 重寫虛擬DOM 可以期待更多的編譯時提示來減少運行時的開銷 優化插槽生成 可以單獨渲染父組件和子組件 靜態樹提升 降低渲染成本 基於Proxy的觀察者機制 節省內存開銷
檢測機制 更加全面、精準、高效,更具可調試式的響應跟蹤
實現雙向綁定 Proxy 與 Object.defineProperty 相比優劣如何?
React
1、react中key的作用，有key沒key有什麼區別，比較同一層級節點什麼意思？
2、你對虛擬dom和diff演算法的理解，實現render函數
虛擬DOM 本質上是 JavaScript 對象,是對 真實DOM 的抽象表現。 狀態變更時，記錄新樹和舊樹的差異 最後把差異更新到真正的 dom 中 render函數:
3、React組件之間通信方式？
Context 提供了一個無需為每層組件手動添加 props ，就能在組件樹間進行數據傳遞的方法.如果你只是想避免層層傳遞一些屬性，組件組合（ component composition ）有時候是一個比 context 更好的解決方案。 5. 組件組合缺點：會使高層組件變得復雜
4、如何解析jsx
5、生命周期都有哪幾種，分別是在什麼階段做哪些事情？為什麼要廢棄一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被廢棄，在17版本將被刪除，需要使用UNSAVE_前綴使用，目的是向下兼容。
6、關於react的優化方法
使用return null而不是CSS的display:none來控制節點的顯示隱藏。保證同一時間頁面的DOM節點盡可能的少。
不要使用數組下標作為key 利用 shouldComponentUpdate 和 PureComponent 避免過多 render function ; render 裡面盡量減少新建變數和bind函數，傳遞參數是盡量減少傳遞參數的數量。 盡量將 props 和 state 扁平化，只傳遞 component 需要的 props （傳得太多，或者層次傳得太深，都會加重 shouldComponentUpdate 裡面的數據比較負擔），慎將 component 當作 props 傳入
使用 babel-plugin-import 優化業務組件的引入，實現按需載入 使用 SplitChunksPlugin 拆分公共代碼 使用動態 import ，懶載入 React 組件
7、綁定this的幾種方式
8、對fiber的理解
9、setState是同步還是非同步的
10、Rex、React-Rex
Rex的實現流程
用戶頁面行為觸發一個 Action ，然後 Store 調用 Recer ，並且傳入兩個參數：當前 State 和收到的 Action 。 Recer 會返回新的 State 。每當 state 更新之後， view 會根據 state 觸發重新渲染。
React-Rex:
Provider ：從最外部封裝了整個應用，並向 connect 模塊傳遞 store 。 Connect ：
11、對高階組件的理解
高階組件是參數為組件，返回值為新組件的函數。 HOC 是純函數，沒有副作用。 HOC 在 React 的第三方庫中很常見，例如 Rex 的 connect 組件。
高階組件的作用：
12、可以用哪些方式創建 React 組件？
React.createClass()、ES6 class 和無狀態函數
13、 React 元素與組件的區別？
組件是由元素構成的。元素數據結構是普通對象，而組件數據結構是類或純函數。
Vue與React對比？
數據流：
react 主張函數式編程，所以推崇純組件，數據不可變，單向數據流，
vue 的思想是響應式的，也就是基於是數據可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。
監聽數據變化實現原理 ：
組件通信的區別：jsx和.vue模板。
性能優化
vuex 和 rex 之間的區別？
從實現原理上來說，最大的區別是兩點：
Rex 使用的是不可變數據，而 Vuex 的數據是可變的。 Rex 每次都是用新的 state 替換舊的 state ，而 Vuex 是直接修改
Rex 在檢測數據變化的時候，是通過 diff 的方式比較差異的，而 Vuex 其實和Vue的原理一樣，是通過 getter/setter 來比較的(如果看 Vuex 源碼會知道，其實他內部直接創建一個 Vue 實例用來跟蹤數據變化)
瀏覽器從輸入url到渲染頁面，發生了什麼？
網路安全、HTTP協議
TCP UDP 區別
Http和Https區別（高頻）
GET和POST區別（高頻）
理解xss，csrf，ddos攻擊原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站腳本攻擊 )是一種代碼注入攻擊。攻擊者在目標網站上注入惡意代碼，當被攻擊者登陸網站時就會執行這些惡意代碼，這些腳本可以讀取 cookie，session tokens ，或者其它敏感的網站信息，對用戶進行釣魚欺詐，甚至發起蠕蟲攻擊等。
CSRF （ Cross-site request forgery ） 跨站請求偽造 ：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經獲取的注冊憑證，繞過後台的用戶驗證，達到冒充用戶對被攻擊的網站執行某項操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒絕服務，全稱 Distributed Denial of Service ，其原理就是利用大量的請求造成資源過載，導致服務不可用。
㈩ 前端面試要點
想要通過前端面試順利進入一線大廠成就高薪前端夢。那麼首先，我們得知道前端面試中，社招和校招究竟有啥區別？
對於前端開發來說，如果說社招更看重對前端技術體系的深入理解，以及解決問題的能力話，那校招更看重的其實是基本功和學習能力（或者說是潛力）。
但其實，無論是社招還是校招，面試的時候都會問到一些曾經操作過的項目，尤其是大廠，或者熱門高薪部門，面試官除必問的技術經驗外，也會對技術深度進行一個基礎的考核，那在這種情況下如何hold住大廠面試呢？
前端面試三要素：簡歷、個人介紹、技術能力。下面，就來分別聊一聊。
1、簡歷篩選關：
HR一般會去看簡歷中所提的技術棧是否匹配，怎麼看呢？我們可以抓住簡歷中的技術名詞，一般來說如果一點技術名詞都沒有提到，那麼大概有以下幾種可能：很水、很牛但概率很小、不會寫簡歷。所以，一部分人可能會因為簡歷的問題沒有了面試機會，這點是需要非常注意的。
2、個人介紹關：
通過了簡歷篩選階段，就真正到了面試環節。這時候一定要准備好一段最多3分鍾的個人介紹。請注意，最多3分鍾！言簡意賅的說明自己的工作時間，擅長技術棧和自己的工作預期。
3、項目經驗表達：
對前端開發學習者而言，JS並不陌生，但大廠的JS面試題卻總是顯得很「陌生」，怎麼樣能夠真正做到深入理解與高級應用？這不僅是面試過程中對前端求職者的要求，也是大多數前端開發者的痛點。
大廠面試中，面試官除了關注你的項目經驗外，還往往喜歡和面試者深入探討前端某些技術領域成體系的前端知識。比如：模塊化、非同步解決方案、網路、框架及原理、線程等，但在與面試官的正面battle中，求職者總會敗下陣來。
所以，建議大家在Web前端面試前一定要注重這三個方面的內容。注重了這些想找找到一份適合的Web前端開發工作並不是難事。