一、HTML
- 1、語意話的目的是什么？
- 2、HTML5新增元素
- 3、cookie與sessionStorage和localStorage的區別
二、CSS
- 1、CSS有哪些基本的選擇器，執行先后順序？
- 2、垂直水平居中方式有哪些？
- 3、常用布局方式有哪些？什么是盒模型？
- 4、常用的塊元素與行內元素有哪些？有什么特征
- 5、清除浮動
- 6、CSS3新特征
- 7、CSS中有哪些長度單位？
- 8、px、em、rem的區別
- 9、display:none和visibility:hidden的區別
- 10、用CSS 實作三角形
- 11、偽類和偽元素的區別
- 12、什么是重繪，重排？如何解決？
  - 重繪（repaint/redraw）
  - 重排（回流/reflow/重構）
  - 觸發重排的原因
  - 如何解決
- 13、transition 都有哪些過度屬性？
- 14、link和@import的區別？
- 15、常用的影片庫有哪些？
- 16、什么是BFC
- 17、href與src的區別
- 18、如何讓 CSS 只在當前組件中起作用？
三、JS
- 1、什么是閉包？
- 2、call、apply、bind 作用和區別（改變this指向）
- 3、原型與原型鏈
- 4、JS基本資料型別
- 5、export和export default的區別
- 6、箭頭函式和普通函式的區別
- 7、GET和POST的區別
- 8、forEach和map的區別
- 9、物件的繼承
- 10、簡述一下你理解的面向物件
- 11、 == 和 ===的區別
- 12、陣列有哪些方法？
- 13、陣列去重（筆試一般都會有）
- 14、JS中new運算子有什么用？
- 15、JS獲取HTML DOM元素的方法
- 16、事件捕獲和事件冒泡
- 17、虛擬dom
- 18、排序方式
- 19、陣列操作方法會改變原陣列
- 20、JS有幾種方法判斷變數的型別？
- 21、null和undefined的區別？
  - (1)、null與undefined的異同點是什么呢？
- 22、什么是跨域？及跨域解決方法
- 23、防抖和節流的使用及區別
- 24、堆疊記憶體和堆記憶體的區別與原理
- 25、深拷貝和淺拷貝的區別和與原理
四、ES6新特性
- Promise
五、計算機網路知識
- 1、HTTP與HTTPS
- 2、TCP與UDP的區別
- 3、HTTP常見的狀態碼
  - 1開頭的狀態碼(資訊類)
  - 2開頭的狀態碼(成功類)
  - 3開頭的狀態碼(重定向)
  - 4開頭的狀態碼(客戶端錯誤)
  - 5開頭的狀態碼(服務器錯誤)
- 4、瀏覽器從輸入url到頁面加載發生了什么
- 5、HTTP 傳輸程序
- 6、瀏覽器如何渲染頁面的？
- 7、性能優化
- 8、webpack是怎么打包的，babel又是什么
- 9、git 和 svn的區別
- 10、webSocket
- 11、require和import區別
- 12、事件回圈（Event Loop）
  - 宏任務、微任務是怎么執行的？
- 13、什么是單頁面應用（SPA）
- 14、什么叫優雅降級和漸進增強？
六、VUE
- 1、MVC和MVVM的理解
- 2、資料雙向系結原理
- 3、vue生命周期
- 4、為什么使用虛擬DOM(常問)
- 5、v-if 和 v-show的作用和區別
- 5、用過vue的哪些組件？
- 6、vue-router 的模式有？
- 7、組件之間如何傳值
  - Vue父子組件之間傳值
  - 兄弟組件之間的傳值
  - 可以通過VUEX 來跨組件傳參
  - 父孫傳值 $attrs（向下）$listeners（向上）
  - 祖先和子孫傳值provide/inject
  - 獲取父組件實體this.$parent
- 8、路由之間如何傳參
- 9、VUEX
- 10、如何解決vuex頁面重繪資料丟失問題？
- 11、computed和watch的區別？
- 12、route和router的區別
- 13、vue中資料變了但是視圖不跟新怎么解決？
- 14、vue中data為什么是函式而不是物件？
- 15、vue中父子組件傳值，父組件異步請求，子組件不能實時更新怎么解決？（vue中資料不能實時更新怎么解決？）
- 16、Vue 路由跳轉方式
- 17、Vue 中 for回圈為什么加 key？
- 18、vue路由守衛有哪些？
  - 全域守衛
  - 組件內的守衛
  - 路由獨享的守衛
- 19、vue常?的修飾符
- 20、vue的兩個核?點
- 21、delete和Vue.delete洗掉陣列的區別
- 22、vue常?的UI組件庫
- 23、Vue首頁白屏是什么問題引起的？如何解決呢？
- 24、性能優化篇
七、React
- 1、react的生命周期
  - 生命周期是什么？
  - react實體生命周期經歷三個階段
  - 三個階段分別對應的建構式有
    - 初始化階段：
  - 運行中階段（更新）
  - 銷毀階段（卸載）
- 2、為什么虛擬DOM 會提高性能
- 3、React的diff原理
- 4、呼叫setState之后，發生了什么？
- 5、state和props的區別
- 6、React中的setState是同步執行還是異步執行？如果是異步的？怎么拿到執行后的state？
- 7、為什么不能直接用以下辦法更新state

點擊打開視頻講解面試技巧+面試全程序

一、HTML

1、語意話的目的是什么？

語意化的主要目的可以概括為用正確的標簽做正確的事

HTMl語意化可以讓頁面的內容結構化，以便于瀏覽器決議和搜索引擎決議，
并且提高了代碼的可讀性便于代碼維護，

2、HTML5新增元素

Canvas繪圖以及SVG繪圖，
拖放（Drag and drop）API
語意化標簽（header、nav、footer、article、section）
音頻、視頻（audio、video）API
地理定位（Geolocation）
本地離線存盤（localStorage）,長期存盤資料，關閉瀏覽器后不丟失，
會話儲存（sessionStorage）,資料在關閉瀏覽器后自動洗掉，
表單控制元件（calendar、date、time、email、url、search）

3、cookie與sessionStorage和localStorage的區別

保存方式
cookie存放在客戶的瀏覽器上，
session都在客戶端中保存，不參與服務器通訊，

生命周期
cookie可設定失效時間
localStorage除非手動清除否則永久保存
sessionStorage關閉當前頁面或瀏覽器后失效

存盤的大小
cookie 4kb左右
session 5M

易用性
cookie需自己封裝
session可以接受原生介面

因為cookie每次請求都會攜帶在http請求中,所以它的主要用來識別用戶登錄,localStorage可以用
來跨頁面傳參,sessionStorage可以用來保留一些臨時資料，

點擊打開視頻講解更加詳細

點擊打開文章詳解

二、CSS

1、CSS有哪些基本的選擇器，執行先后順序？

id選擇器 => #myId {}
類選擇器 => .myClass {}
標簽選擇器 => p,h1 {}
后代選擇器 => div h1 {}
子選擇器 => div>h1 {}
兄弟選擇器(所有的兄弟) => ul~h1 {}
相鄰兄弟選擇器 => ul+h1 {}
屬性選擇器 => li[name='sss'] {}
偽類選擇器 => h1:hover {}
偽元素選擇器 => h1::before{}
通配符選擇器* => * {}

!important>行內樣式（非選擇器）>ID選擇器>類選擇器>標簽選擇器>通配符選擇器（*）

2、垂直水平居中方式有哪些？

CSS 中幾種最常用的水平垂直居中的方法

3、常用布局方式有哪些？什么是盒模型？

點擊打開視頻詳解

點擊打開文章詳解

4、常用的塊元素與行內元素有哪些？有什么特征

塊元素：div、h1~h6、ul、li、table、p、br、form，
特征：獨占一行，換行顯示，可以設定寬高，可以嵌套塊和行

行內元素：span、a、img、textarea、select、option、input，
特征：只有在行內顯示，內容撐開寬、高，不可以設定寬、高（img、input、textarea等除外），

5、清除浮動

父級div定義overflow:hidden（如果父級元素有定位元素超出父級，超出部分會隱藏，）
給浮動元素父級增加標簽（由于新增標簽會造成不必要的渲染，不建議使用）
偽元素清除浮動：給浮動元素父級增加 .clearfix::after（content: ‘’; display: table; 
clear: both;）（不會新增標簽，不會有其他影響，）

6、CSS3新特征

圓角（border-radius）
陰影（box-shadow）
文字特效(text-shadow)
線性漸變（gradient）
變換(transform)
更多的CSS選擇器
更多背景設定（background）
色彩模式（rgba）
偽元素（::selection）
媒體查詢（@media）
多欄布局（column）
圖片邊框（border-image）

7、CSS中有哪些長度單位？

絕對長度單位：px
百分比: %
相對父元素字體大小單位: em
相對于根元素字體大小的單位: rem
相對于視口*寬度的百分比（100vw即視窗寬度的100%）: vw
相對于視口*高度的百分比（100vh即視窗高度的100%）: vh

8、px、em、rem的區別

點擊打開文章詳解

9、display:none和visibility:hidden的區別

display:none：隱藏元素，在檔案布局中不在給它分配空間（從檔案中移除），會引起回流（重排）
visibility:hidden: 隱藏元素，但是在檔案布局中仍保留原來的空間（還在檔案中），
不會引起回流（重繪）

10、用CSS 實作三角形

點擊打開視頻講解

點擊打開文章講解

11、偽類和偽元素的區別

點擊打開文章講解

12、什么是重繪，重排？如何解決？

重繪（repaint/redraw）

某個dom節點的顏色，背景顏色變了，字體大小，只影響自己，不影響其他元素，

注意：table及其內部元素可能需要多次計算才能確定好其在渲染樹中節點的屬性，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一，

重排（回流/reflow/重構）

某個dom節點的寬高，布局，隱藏等發生改變，不僅自身發生了改變，而且其他元素也會受到影響隨之發生改變，每個頁面最少一次回流，就是頁面第一次加載的時候，

觸發重排的原因

頁面初始化渲染（無可避免）
添加或洗掉可見的DOM元素
元素尺寸的改變------大小，外邊距；邊框
瀏覽器視窗尺寸的變化
填充內容的改變，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變
讀取某些元素屬性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,
　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　
　currentStyle(IE)　)

1.重繪不一定重排，但是重排一定會重繪
2.重繪和重排的成本都是非常高的，要盡量減少dom的增刪改

如何解決

不要直接操作樣式，先設定好class，然后修改DOM的className;
position:absolute 與flex 不會導致重排
不要把DOM 節點的屬性放在一個回圈當成回圈的變數；
需要影片的元素脫離檔案流；
不使用table 布局，
盡量不修改影響范圍比較大的DOM;
如果要多次添加DOM,先使用  document.createDocumentFragment() 創建一個盒子，
完盒子里面先添加子元素，添加完成在插入元素中；

13、transition 都有哪些過度屬性？

點擊打開視頻講解更詳細

點擊打開文章詳解

14、link和@import的區別？

link屬于html標簽，而@import是css提供的，
頁面被加載時，link會同時被加載，而@import參考的css會等到頁面被加載完再加載的，
兼容性問題：@import只在IE5以上才能識別，而link是html標簽，無兼容性問題，
權重問題:@import的權重要高于link，
DOM操作:DOM可以操作link中的樣式，而不可以操作@import中的樣式，

<!-- html 檔案 -->

<!-- link 方式，推薦 -->
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/mochenxiya/archive/2022/08/23/style.css" media="screen" />

<!-- @import 方式 -->
<style type="text/css" media="screen">
    @import url(style.css);
</style>

15、常用的影片庫有哪些？

點擊打開視頻講解更詳細

點擊打開文章詳解

16、什么是BFC

點擊打開視頻講解更加詳細

點擊打開文章講解

17、href與src的區別

點擊打開文章講解

18、如何讓 CSS 只在當前組件中起作用？

將當前組件的<style>修改為<style scoped>，

三、JS

1、什么是閉包？

點擊打開視頻講解更詳細

點擊打開文章詳解

2、call、apply、bind 作用和區別（改變this指向）

點擊打開文章詳解

3、原型與原型鏈

點擊打開視頻講解更加詳細

點擊打開文章詳解

4、JS基本資料型別

點擊打開視頻講解更加詳細

點擊打開文章詳解

5、export和export default的區別

點擊打開文章詳解

6、箭頭函式和普通函式的區別

語法更加簡潔、清晰，=>()
箭頭函式是匿名函式，不能作為建構式，不能使用new
箭頭函式不能使用arguments，而用reat引數…解決
箭頭函式沒有自己的this,會捕獲其所在的背景關系的this值,并且不能通過call()和apply()來改變其this
箭頭函式沒有原型

7、GET和POST的區別

點擊打開文章詳解

8、forEach和map的區別

點擊打開視頻講解更加詳細

點擊打開文章詳解

9、物件的繼承

常見的：
	原型鏈繼承
	借用建構式繼承
	原型鏈+借用建構式的組合繼承（使用 call 或 applay 方法）
	ES6中class 的繼承（class可以通過extends關鍵字實作繼承）

10、簡述一下你理解的面向物件

面向物件是基于萬物皆物件這個哲學觀點. 把一個物件抽象成類，具體上就是把一個物件的靜態特征和動態特征抽象成屬性和方法，也就是把一類事物的演算法和資料結構封裝在一個類之中,程式就是多個物件和互相之間的通信組成的，

面向物件具有封裝性,繼承性,多型性，

封裝：隱蔽了物件內部不需要暴露的細節,使得內部細節的變動跟外界脫離,只依靠介面進行通信.封裝性降低了編程的復雜性，
繼承：使得新建一個類變得容易,一個類從派生類那里獲得其非私有的方法和公用屬性的繁瑣作業交給了編譯器，
多型：繼承和實作介面和運行時的型別系結機制所產生的多型，使得不同的類所產生的物件能夠對相同的訊息作出不同的反應,極大地提高了代碼的通用性.，

11、 == 和 ===的區別

點擊打開文章詳解

12、陣列有哪些方法？

點擊打開文章詳解

13、陣列去重（筆試一般都會有）

點擊打開文章詳解

14、JS中new運算子有什么用？

創建臨時物件，并將this指向臨時物件
將建構式的原型屬性和方法掛載到新物件的__proto__(原型指標)上
return 臨時物件

15、JS獲取HTML DOM元素的方法

通過ID獲取（getElementById）
通過name屬性（getElementsByName）
通過標簽名（getElementsByTagName）
通過類名（getElementsByClassName）
獲取html的方法（document.documentElement）
獲取body的方法（document.body）
通過選擇器獲取一個元素（querySelector）
通過選擇器獲取一組元素（querySelectorAll）

16、事件捕獲和事件冒泡

事件捕獲和事件冒泡主要解決了頁面事件流的問題，頁面的事件流經過了三個階段，分別是事件捕獲、目標階段和事件冒泡階段，
事件捕獲是由外向內；而事件冒泡則是由內向外，
event.stopPropagation() 可以阻止事件流的進一步傳播，
采用事件代理的方式，能夠節省記憶體消耗，對于動態改變子元素的時候，也非常有利，避免了很多麻煩的步驟，比如重新系結事件，（把子元素的事件委托給父元素來處理）

17、虛擬dom

定義： 虛擬DOM就是普通的js物件，用來描述真實dom結構的js物件，因為它不是真實的dom，所以才叫做虛擬dom，
作用： 虛擬dom可以很好地跟蹤當前dom狀態，因為它會根據當前資料生成一個描述當前dom結構的虛擬dom，然后資料發生變化時，有生成一個新的虛擬dom，而兩個虛擬dom恰好保存了變化前后的狀態，然后通過diff演算法，計算出當前兩個虛擬dom之間的差異，得出一個更好的替換方案，

18、排序方式

冒泡排序：比較所有相鄰元素,如果第一個比第二個大，則交換它們，
選擇排序：找到陣列中的最小值，選中它并將其放置在第一位，
插入排序：從第二個數開始往前比，比它大就往后排，
歸并排序：把陣列劈成兩半，再遞回地對陣列進行“分”操作，直到分成一個個單獨的數，
快速排序：從陣列中任意選擇一個基準，所有比基準小的元素放到基準前面，比基準大的元素放到
基準的后面，

19、陣列操作方法會改變原陣列

會改變：push()，pop(),shift(),unshift() ,splice(),sort(),reverse()，
不變：concat(),split(),slice()，

js中substr（）、substring（）、slice（）、splice（）、split（）的區別與作用

點擊打開文章詳解

20、JS有幾種方法判斷變數的型別？

typeof：判斷基本資料型別，對于參考資料型別除了function回傳’function‘，其余全部
		回傳’object’，
instanceof：區分參考資料型別，檢測方法是檢測的型別在當前實體的原型鏈上，用其檢測出來的
			結果都是true，不太適合用于簡單資料型別的檢測，檢測程序繁瑣且對于簡單資料類
			型中的undefined, null, symbol檢測不出來，
constructor：檢測參考資料型別，檢測方法是獲取實體的建構式判斷和某個類是否相同，如果
			相同就說明該資料是符合那個資料型別的，這種方法不會把原型鏈上的其他類也加入
			進來，避免了原型鏈的干擾，
Object.prototype.toString.call()：適用于所有型別的判斷檢測，檢測方法是
			Object.prototype.toString.call(資料) 回傳的是該資料型別的字串，
			(舉例：字串回傳的是[object String])

instanceof的實作原理：驗證當前類的原型prototype是否會出現在實體的原型鏈__proto__上，只要在它的原型鏈上，則結果都為true，因此，instanceof 在查找的程序中會遍歷左邊變數的原型鏈，直到找到右邊變數的 prototype，找到回傳true，未找到回傳false，
Object.prototype.toString.call原理：Object.prototype.toString 表示一個回傳物件型別的字串，call()方法可以改變this的指向，那么把Object.prototype.toString()方法指向不同的資料型別上面，回傳不同的結果

21、null和undefined的區別？

null和undefined 區別為：undefined是表示變數宣告過但并未賦過值，它是所有未賦值變數默認值；null表示一個變數將來可能指向一個物件，一般用于主動釋放指向物件的參考，

(1)、null與undefined的異同點是什么呢？

共同點： 都是原始型別，保存在堆疊中變數本地
不同點：
（1）undefined——表示變數宣告過但并未賦過值，
它是所有未賦值變數默認值，
例如：var a; //a自動被賦值為undefined
（2）null——表示一個變數將來可能指向一個物件，
一般用于主動釋放指向物件的參考，
2、何時使用null?
當使用完一個比較大的物件時，需要對其進行釋放記憶體時，設定為null
3、定義
（1）undefined：是所有沒有賦值變數的默認值，自動賦值
（2）null：主動釋放一個變數參考的物件，表示一個變數不再指向任何物件地址

22、什么是跨域？及跨域解決方法

點擊打開視頻講解更加詳細

點擊打開文章詳解

23、防抖和節流的使用及區別

點擊打開視頻講解更加詳細

點擊打開文章詳解

24、堆疊記憶體和堆記憶體的區別與原理

點擊打開視頻講解更加詳細

點擊打開文章詳解

25、深拷貝和淺拷貝的區別和與原理

點擊打開視頻講解更加詳細

點擊打開文章詳解

四、ES6新特性

新增塊級作用域let定義變數和const定義常量
變數的解構賦值
模板字串 （‘${}’）
默認引數（key=value）
箭頭函式（=>）
擴展運算子（…）
模塊（import/export）
類（class/extends）
Promise
Proxy
Symbol

點擊打開視頻講解更加詳細

點擊打開文章詳解

Promise

含義： 異步編程的一種解決方案，用來解決回呼地獄，
三種狀態： pending（進行中）、fulfilled（已成功）和rejected（已失敗）（Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected，）

resolved函式作用： 將Promise物件的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），
reject函式的作用： 將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），

Promise實體生成以后，可以用then方法分別指定resolved狀態和rejected狀態的回呼函式，
then: Promise 實體添加狀態改變時的回呼函式，可以接受兩個回呼函式作為引數，第一個回呼函式是Promise物件的狀態變為resolved時呼叫，第二個回呼函式是Promise物件的狀態變為rejected時呼叫，

缺點： 無法取消Promise，一旦新建它就會立即執行，無法中途取消，如果不設定回呼函式，Promise內部拋出的錯誤，不會反應到外部，

五、計算機網路知識

1、HTTP與HTTPS

HTTP：客戶端與服務器之間資料傳輸的格式規范，表示“超文本傳輸協議”，
HTTPS：在HTTP與TCP之間添加的安全協議層，
默認埠號：HTTP：80，HTTPS：443，
傳輸方式：http是明文傳輸，https則是具有安全性的ssl加密傳輸協議，
連接方式：http的是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證
的網路協議，比http協議安全，

2、TCP與UDP的區別

TCP面向連接（如打電話要先撥號建立連接）;UDP是無連接的，即發送資料之前不需要建立連接，
TCP面向位元組流，實際上是TCP把資料看成一連串無結構的位元組流;UDP是面向報文的
每一條TCP連接只能是點到點的;UDP支持一對一，一對多，多對一和多對多的互動通信
TCP首部開銷20位元組;UDP的首部開銷小，只有8個位元組，
TCP提供可靠的服務，UDP適用于一次只傳少量資料、對可靠要求不高的環境，

3、HTTP常見的狀態碼

1開頭的狀態碼(資訊類)

100，接受的請求正在處理，資訊類狀態碼

2開頭的狀態碼(成功類)

2xx(成功)表示成功處理了請求的狀態碼
200(成功)服務器已成功處理了請求，

3開頭的狀態碼(重定向)

3xx(重定向)表示要完成請求，需要進一步操作，通常這些狀態代碼用來重定向，
301，永久性重定向，表示資源已被分配了新的 URL
302，臨時性重定向，表示資源臨時被分配了新的 URL
303，表示資源存在另一個URL，用GET方法獲取資源
304，(未修改)自從上次請求后，請求網頁未修改過，服務器回傳此回應時，不會回傳網頁內容

4開頭的狀態碼(客戶端錯誤)

4xx(請求錯誤)這些狀態碼表示請求可能出錯，妨礙了服務器的處理
400(錯誤請求)服務器不理解請求的語法
401表示發送的請求需要有通過HTTP認證的認證資訊
403(禁止)服務器拒絕請求
404(未找到)服務器找不到請求網頁

5開頭的狀態碼(服務器錯誤)

5xx(服務器錯誤)這些狀態碼表示服務器在嘗試處理請求時發生內部錯誤，這些錯誤可能是服務器
本身的錯誤，而不是請求的錯誤
500，(服務器內部錯誤)服務器遇到錯誤，無法完成請求
503，表示服務器處于停機維護或超負載，無法處理請求

4、瀏覽器從輸入url到頁面加載發生了什么

1、瀏覽器的地址欄輸入URL并按下回車，
2、瀏覽器查找當前URL是否存在快取，并比較快取是否過期，
3、DNS決議URL對應的IP，
4、根據IP建立TCP連接（三次握手），
5、HTTP發起請求，
6、服務器處理請求，瀏覽器接收HTTP回應，
7、渲染頁面，構建DOM樹，
8、關閉TCP連接（四次揮手），

5、HTTP 傳輸程序

含義：從建立連接到斷開連接一共七個步驟，就是三次招手四次揮手

TCP 建立連接
瀏覽器發送請求命令
瀏覽器發送請求頭
服務器應答
服務器回應資訊
服務器發送資料
斷開TCP連接

6、瀏覽器如何渲染頁面的？

瀏覽器決議html原始碼，將HTML轉換成dom樹，
將CSS樣式轉換成stylesheet（CSS規則樹），
瀏覽器會將CSS規則樹附著在DOM樹上，并結合兩者生成渲染樹（Render Tree）
生成布局（flow），瀏覽器通過決議計算出每一個渲染樹節點的位置和大小，在螢屏上畫出渲染樹的
所有節點
合成繪制生成頁面，

7、性能優化

減少http請求次數
減少DNS查找
避免重定向
使用Ajax快取
少用全域變數、減少DOM操作的使用
優化圖片大小，通過CSS Sprites（精靈圖）優化圖片，
將css放在頂部，將js放在底部

8、webpack是怎么打包的，babel又是什么

Webpack：把所有依賴打包成一個 bundle.js檔案，通過代碼分割成單元片段并按需加載，Webpack是以公共JS的形式來書寫腳本的，但對AMD/CMD的支持也很全面，方便舊專案進行代碼遷移，
把專案當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到專案的所有依賴檔案，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript檔案，

babel將es6、es7、es8等語法轉換成瀏覽器可識別的es5或es3語法，

9、git 和 svn的區別

SVN是集中式版本控制系統，版本庫是集中放在中央服務器的，首先要從中央服務器哪里得到最新的版本，干完活后，需要把自己做完的活推送到中央服務器，集中式版本控制系統是必須聯網才能作業（如果在局域網還可以，帶寬夠大，速度夠快，如果在互聯網下，如果網速慢的話，就納悶了）

Git是分布式版本控制系統，沒有中央服務器的，每個人的電腦就是一個完整的版本庫，這樣，作業的時候就不需要聯網了，因為版本都是在自己的電腦上，自己在電腦上改了檔案A，其他人也在電腦上改了檔案A，這時，只需把各自的修改推送給對方，就可以互相看到對方的修改了，

10、webSocket

webSocket： 可以讓服務器主動向客戶端發送訊息，適合開發聊天室，多人游戲等協作應用，

WebSocket協議是基于TCP的一種新的網路協議，在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向資料傳輸，

11、require和import區別

呼叫時間
require運行時呼叫，理論上可以運用在代碼任何地，甚至不需要賦值給某個變數之后再使用，
lmport是編譯時候呼叫，必須放在檔案開頭，而且使用格式也是確定的，
遵循規范
require 是 AMD規范引入方式
import是es6的一個語法標準，如果要兼容瀏覽器的話必須轉化成es5的語法
本質
require是賦值程序，其實require 的結果就是物件、數字、字串、函式等，再把require的結果賦值給某個變數，
import是解構程序，

通過require 引入基礎資料型別時，屬于復制該變數，
通過require 引入復雜資料型別時，資料淺拷貝該物件，
出現模塊之間的回圈參考時,會輸出已經執行的模塊,而未執行的模塊不輸出(比較復雜），CommonJS模塊默認export的是一個物件，即使匯出的是基礎資料型別，

ES6 模塊語法是 JavaScript 模塊的標準寫法，堅持使用這種寫法，取代 Node.js 的 CommonJS 語法，
使用import取代require()，

// CommonJS 的寫法
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// ES6 的寫法
import { func1, func2 } from 'moduleA';

使用export取代module.exports，

// commonJS 的寫法
var React = require('react');
var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});
module.exports = Breadcrumbs;

// ES6 的寫法
import React from 'react';
class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};
export default Breadcrumbs;

12、事件回圈（Event Loop）

原因：JavaScript是單執行緒，所有任務需要排隊，前一個任務結束，才會執行后一個任務，

所有任務可以分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous），
同步任務：在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行后一個任務；
異步任務：不進入主執行緒、而進入"任務佇列"的任務，只有"任務佇列"通知主執行緒，某個異步任務可以執行了，該任務才會進入主執行緒執行，

同步和異步任務分別進入不同的執行環境，先執行同步任務，把異步任務放入回圈佇列當中掛起，等待同步任務執行完，再執行佇列中的異步任務，異步任務先執行微觀任務，再執行宏觀任務，一直這樣回圈，反復執行，

微任務：Promise.then、catch、finally、async/await，
宏任務：整體代碼 Script、UI 渲染、setTimeout、setInterval、Dom事件、ajax事件，

宏任務、微任務是怎么執行的？

執行順序：先執行同步代碼，遇到異步宏任務則將異步宏任務放入宏任務佇列中，遇到異步微任務則將異步微任務放入微任務佇列中，當所有同步代碼執行完畢后，再將異步微任務從佇列中調入主執行緒執行，微任務執行完畢后再將異步宏任務從佇列中調入主執行緒執行，一直回圈直至所有任務執行完畢，

13、什么是單頁面應用（SPA）

一個系統只加載一次資源，之后的操作互動、資料互動是通過路由、ajax來進行，頁面并沒有重繪，
在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，所有的業務功能都是它的子模塊，通過特定的方式掛接到主界面上，

優點：

前后端分離
良好的互動體驗——用戶不用重繪頁面，頁面顯示流暢
減輕服務器壓力——服務器只出資料
共用一套后端代碼——多個客戶端可共用一套后端代碼
加載速度快,內容的改變不需要重新加載整個頁面,對服務器壓力小

缺點：

SEO難度高——資料渲染在前端進行
頁面初次加載比較慢,頁面復雜提高很多

多頁面： 一個應用多個頁面,頁面跳轉時整個頁面都重繪,每次都請求一個新的頁面
有點:SEO效果好

缺點： 頁面切換慢,每次切換頁面需要選擇性的重新加載公共資源

14、什么叫優雅降級和漸進增強？

漸進增強（Progressive Enhancement）： 一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、互動、追加功能達到更好的體驗，
優雅降級（Graceful Degradation）： 一開始就構建站點的完整功能，然后針對瀏覽器測驗和修復，

在傳統軟體開發中，經常會提到向上兼容和向下兼容的概念，漸進增強相當于向上兼容，而優雅降級相當于向下兼容，向下兼容指的是高版本支持低版本的或者說后期開發的版本支持和兼容早期開發的版本，向上兼容的很少，大多數軟體都是向下兼容的，

二者區別：
1、優雅降級和漸進增強只是看待同種事物的兩種觀點，
2、優雅降級觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站，
3、漸進增強觀點則認為應關注于內容本身，

六、VUE

1、MVC和MVVM的理解

M:model(資料模型)，V：view(視圖)，C：controller(邏輯處理)，VM：(連接model和view)
MVC:單向通信，必須通過controller來承上啟下，
MVVM：資料雙向系結，資料改變視圖，視圖改變資料，

2、數據雙向系結原理

答：通過資料劫持結合發布—訂閱模式，通過Object.defineProperty()為各個屬性定義get、set
方法，在資料發生改變時給訂閱者發布訊息，觸發相應的事件回呼，

3、vue生命周期

Vue 實體有一個完整的生命周期，也就是從開始創建、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列程序，我們稱這是 Vue 的生命周期，通俗說就是 Vue 實體從創建到銷毀的程序，就是生命周期，

beforeCreate：創建前，此時，組件實體剛剛創建，還未進行資料觀測和事件配置，拿不到任何資料，
created：創建完成，vue 實體已經完成了資料觀測，屬性和方法的計算(比如props、methods、data、computed和watch此時已經拿得到)，未掛載到DOM，不能訪問到el屬性，el屬性，ref屬性內容為空陣列常用于簡單的ajax請求，頁面的初始化，
beforeMount：掛載前，掛在開始之前被呼叫，相關的render函式首次被呼叫（虛擬DOM），編譯模板，把data里面的資料和模板生成html，完成了el和data 初始化，注意此時還沒有掛在html到頁面上，
mounted：掛載完成，也就是模板中的HTML渲染到HTML頁面中，此時可以通過DOM API獲取到DOM節點，$ref屬性可以訪問常用于獲取VNode資訊和操作，ajax請求，mounted只會執行一次，
beforeUpdate：在資料更新之前被呼叫，發生在虛擬DOM重新渲染和打補丁之前，不會觸發附加地重渲染程序，
updated：更新后，在由于資料更改導致地虛擬DOM重新渲染和打補丁之后呼叫，
beforeDestroy;銷毀前，在實體銷毀之前呼叫，實體仍然完全可用，（一般在這一步做一些重置的操作，比如清除掉組件中的定時器和監聽的dom事件）
destroyed：銷毀后，在實體銷毀之后呼叫，呼叫后，vue實列指示的所有東西都會解綁，所有的事件監聽器會被移除，

其他：
activated：在keep-alive組件激活時呼叫
deactivated：在keep-alive組件停用時呼叫

4、為什么使用虛擬DOM(常問)

創建真實DOM的代價高：真實的 DOM 節點 node 實作的屬性很多，而 vnode 僅僅實作一些必要的屬性，相比起來，創建一個 vnode 的成本比較低，
觸發多次瀏覽器重繪及回流：使用 vnode ，相當于加了一個緩沖，讓一次資料變動所帶來的所有 node 變化，先在 vnode 中進行修改，然后 diff 之后對所有產生差異的節點集中一次對 DOM tree 進行修改，以減少瀏覽器的重繪及回流，
虛擬dom由于本質是一個js物件，因此天生具備跨平臺的能力，可以實作在不同平臺的準確顯示，
Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具備了現代框架應有的高級特性，

5、v-if 和 v-show的作用和區別

無論v-show的值為true或者false,元素都會存在于html頁面中; 而v-if的值為true時,元素才會
存在于html頁面中，
v-show指令是通過修改元素的display屬性來實作的，
v-if是動態地向DOM樹內添加或者洗掉DOM元素,v-show是通過設定DOM元素的display樣式屬性控制
顯隱的，
v-if是"真正的"條件渲染,因為它會確保在奇幻程序中條件快內的事件監聽器和子組件適當的銷毀和
重建，
v-if也是惰性的,如果在初始渲染時條件為假,則什么也不做,直到條件第一次變為真時,才開始渲染
條件塊，
v-show不管初始條件是什么,元素總會背渲染,并且只是簡單地基于css進行切換，
一般來說,v-if有更高的切換開銷,而v-show則有更高的初始渲染開銷

因此,如果需要非常頻繁地切換,使用v-show比較好,如果在運行時條件不會改變時,用v-if比較好

切換時生命周期函式的執行
v-if
初始渲染
初始值為false時,不會渲染(所謂惰性),生命周期函式不會執行
初始值為true時,組件開始渲染,依次執行beforCreate,created,beforeMount,mounted等生命周期

切換時
從false到true:依次執行beforeCreate,created,beforeMount,moynted
從true到false:依次執行beforeDestroy,destroyed

v-show
初始渲染
無論初始狀態為true還是false,組件都會渲染,依次執行beforeCreate,created,beforeMount,mounted

切換
基于css進行切換,對生命周期函式無影響.

5、用過vue的哪些組件？

1、vue-route
2、axios
3、vuex
4、Element UI
5、swiper
6、vue-echarts
7、vue-video-player
8、vue-photo-preview等等

6、vue-router 的模式有？

1、hash模式，用URL hash值來做路由，支持所有瀏覽器；該模式實作的路由，在通過鏈接后面
添加““#”+路由名字”，
2、history模式，由h5提供的history物件實作，依賴H5 History API和服務器配置，
3、abstract模式，支持所有JS運行環境，如Node服務器端，如果發現沒有瀏覽器的API，路由會
自動強制進入該模式，

7、組件之間如何傳值

Vue父子組件之間傳值

子組件通過props來接受資料和通過$emit來觸發父組件的自定義事件

兄弟組件之間的傳值

建一個公共組件bus.js.，傳遞方通過事件觸發bus.$emit，接收方通過在mounted（）{}生命周期
里觸發bus.$on，

可以通過VUEX 來跨組件傳參

父孫傳值 `$attrs`（向下）`$listeners`（向上）

祖先和子孫傳值provide/inject

獲取父組件實體this.$parent

8、路由之間如何傳參

通過router-link路由導航跳轉傳遞

<router-link to=`/a/${id}`>routerlink傳參</router-link>

跳轉時使用push方法拼接攜帶引數，

 this.$router.push({
   path: `/getlist/${id}`,
 })

通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數

this.$router.push({
  name: 'Getlist',
   params: {
     id: id
   }
 })

使用path來匹配路由，然后通過query來傳遞引數，

this.$router.push({
 path: '/getlist',
  query: {
    id: id
  }
})

注意：query有點像ajax中的get請求，而params像post請求，

params在地址欄中不顯示引數，重繪頁面，引數丟失,
其余方法在地址欄中顯示傳遞的引數，重繪頁面，引數不丟失，

9、VUEX

原理：Vuex是專門為vue.js應用程式設計的狀態管理工具，

1、state   保存vuex中的資料源，通過this.$store.state獲取

2、getters	用于監聽state中的值的變化，回傳計算后的結果，getter的回傳值會根據它的依賴
			被快取起來

3、mutations  是修改store中的值得唯一方式		//this.$store.commit('add')

4、action 	官方建議提交一個actions，在actions中提交mutations再去修改狀態值， 
			this.$store.dispatch('add')

5、modules 模塊化

10、如何解決vuex頁面重繪資料丟失問題？

原因：因為vuex里的資料是保存在運行記憶體中的，當頁面重繪時，頁面會重新加載vue實體，vuex里面的資料就會被清空，
解決方法：將vuex中的資料直接保存到瀏覽器快取中，（一般是用sessionStorage）

11、computed和watch的區別？

computed值有快取、觸發條件是依賴值發生更改、 watch無快取支持異步、監聽資料變化

computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有快取，只有它依賴的屬性值發生
改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch： 更多的是觀察的作用，支持異步，類似于某些資料的監聽回呼 ，每當監聽的資料變化時都
會執行回呼進行后續操作；

computed應用場景：需要進行數值計算，并且依賴于其它資料時，應該使用 computed，因為可以
利用 computed 的快取特性，避免每次獲取值時，都要重新計算；

watch應用場景：需要在資料變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 
選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結
果前，設定中間狀態，這些都是計算屬性無法做到的，

點擊打開視頻講解更加詳細

點擊打開文章詳解

12、route和router的區別

route:是路由資訊物件，包括“path,parms,hash,name“等路由資訊引數，
router:是路由實體物件，包括了路由跳轉方法，鉤子函式等，

13、vue中資料變了但是視圖不跟新怎么解決？

vue不能檢測以下變動的陣列：

1、當你利用索引直接設定一個項時，vm.items[indexOfItem] = newValue
2、當你修改陣列的長度時，例如： vm.items.length = newLength

物件屬性的添加或洗掉

由于 Vue 會在初始化實體時對屬性執行 getter/setter 轉化程序，所以屬性必須在 data 物件上存在才能讓 Vue 轉換它，這樣才能讓它是回應的，

解決辦法：

使用 Vue.set(object, key, value) 方法將回應屬性添加到嵌套的物件上
Vue.set(vm.someObject, ‘b’, 2) 或者 this.$set(this.someObject,‘b’,2) （這也是全域 Vue.set 方法的別名）

異步更新佇列

在最新的專案中遇到了這種情況，資料第一次獲取到了，也渲染了，但是第二次之后資料只有在再一次渲染頁面的時候更新，并不能實時更新，

Vue 異步執行 DOM 更新，只要觀察到資料變化，Vue 將開啟一個佇列，并緩沖在同一事件回圈中發生的所有資料改變，如果同一個 watcher 被多次觸發，只會被推入到佇列中一次，

解決辦法：

可在資料變化之后立即使用 Vue.nextTick(callback)，這樣回呼函式在 DOM 更新完成后就會呼叫

點擊打開視頻講解更加詳細

點擊打開文章詳解

14、vue中data為什么是函式而不是物件？

vue組件是可復用的vue實體，一個組件被創建好之后，就可能被用在各個地方，而組件不管被復用了多少次，組件中的data資料都應該是相互隔離，互不影響的.

基于這一理念，組件每復用一次，data資料就會被復制一次，之后，當某一處復用的地方組件內data資料被改變時，其他復用地方組件的data資料不受影響，

如果data是物件的話，每當被復用是，復用的物件和源物件都會指向同一個記憶體地址（淺拷貝），互相之間相互影響，所以要是函式

15、vue中父子組件傳值，父組件異步請求，子組件不能實時更新怎么解決？（vue中資料不能實時更新怎么解決？）

首先了解父子組件生命周期執行順序
加載渲染資料程序
父組件 beforeCreate
父組件 created
父組件 beforeMount
子組件 beforeCreate
子組件 created
子組件 beforeMount
子組件 mounted
父組件 mounted

原因：因為生命周期只會執行一次，資料是要等到異步請求以后才能拿到，那么子組件的mounted鉤子執行的時候，還沒有拿到父組件傳遞過來的資料，但是又必須要列印出來結果，那這樣的話，就只能去列印props中的默認值空字串了，所以列印的結果是一個空字串，

解決辦法：

1、使用v-if控制組件渲染的時機

初始還沒拿到后端介面的異步資料的時候，不讓組件渲染，等拿到的時候再去渲染組件，使用v-if="變數"去控制，初始讓這個變數為false，這樣的話，子組件就不會去渲染，等拿到資料的時候，再讓這個變數變成true，

舉例：

  data() {
    return {
      isTrue:false // 初始為false
    };
  },
  monted(){
  this.$post.a.b.c.getData(res=>{
        if(res.result){
            this.isTrue = true
         }
     })
  }

2、使用watch監聽資料的變化

舉例：

  props: {
    tableData: {
      type: Array,
      default: [],
    },
  },
  watch: {
     tableData(val){
         console.log(val)
     }
  },

3、使用VueX

16、Vue 路由跳轉方式

router-link 標簽跳轉
this.$router.push()
this.$router.replace()
this.$router.go(n)：（0：當前頁，-1上一頁，+1下一頁，n代表整數）

17、Vue 中 for回圈為什么加 key？

為了性能優化，因為vue是虛擬DOM，更新DOM時用diff演算法對節點進行一一比對，比如有很多li元素，要在某個位置插入一個li元素，但沒有給li上加key，那么在進行運算的時候，就會將所有li元素重新渲染一遍，但是如果有key，那么它就會按照key一一比對li元素，只需要創建新的li元素，插入即可，不需要對其他元素進行修改和重新渲染，
key也不能是li元素的index，因為假設我們給陣列前插入一個新元素，它的下標是0，那么和原來的第一個元素重復了，整個陣列的key都發生了改變，這樣就跟沒有key的情況一樣了，

18、vue路由守衛有哪些？

路由守衛分為三種 ——分別是：全域路由守衛、組件路由守衛、獨享路由守衛，

全域守衛

全域守衛又分為全域前置守衛、和后置守衛

1. router.beforeEach((to,from,next)=>{})

回呼函式中的引數，to：進入到哪個路由去，from：從哪個路由離開，next：函式，決定是否展示你要看到的路由頁面，

從名字全域前置守衛不難理解，它是全域的，即對整個單頁應用（SPA）中的所有路由都生效，所以當定義了全域的前置守衛，在進入每一個路由之前都會呼叫這個回呼，那么如果你在回呼中對路由的跳轉條件判斷出錯，簡單點就是死回圈…因為你遺漏了某種路由跳轉的情況，守衛會一直執行，所以在使用全域前置守衛的時候一定要判斷清楚可能會出現的路由跳轉的情況，

2.router.afterEach((to, from) => {}）

只有兩個引數，to：進入到哪個路由去，from：從哪個路由離，

理解了全域前置守衛，那么全域后置守衛也就那么一回事，全域后置守衛是整個單頁應用中每一次路由跳轉后都會執行其中的回呼，所以多用于路由跳轉后的相應頁面操作，并不像全域前置守衛那樣會在回呼中進行頁面的重定向或跳轉，

組件內的守衛

組件路由守衛分為到達這個組件時，離開這個組件時

1. beforeRouteEnter:(to,from,next)=>{}——到達

to，from引數與上面使用方法一致，next回呼函式略有不同，

2.beforeRouteUpdate:(to,from,next)=>{}——更新

3. beforeRouteLeave:(to,from,next)=>{}——離開

點擊其他組件時，判斷是否確認離開，確認執行next()；取消執行next(false)，留在當前頁面，

路由獨享的守衛

1. beforeEnter:(to,from,next)=>{}

與全域路由守衛用法一致，但是只能針對一個頁面使用

19、vue常?的修飾符

.stop:等統?JavaScript中的event.stopPropagation(),防?事件冒泡
.prevent:等同于JavaScript中的event，preventDefault(),防?執?預設的?為(如果事件可
取消，則取消該事件，?不停?事件的進?步傳播)；
.capture:與事件冒泡的?向相反，事件捕獲由外到內
.self:只會觸發??范圍內的事件，不包含?元素；
.once:只會觸發?次，

20、vue的兩個核?點

資料驅動：ViewModel，保證資料和視圖的?致性
組件系統：應?類UI可以看做全部是由組件樹構成的

21、delete和Vue.delete洗掉陣列的區別

delete只是被洗掉的元素變成了empty/undefined其他的元素的鍵值還是不變，
Vue.delete直接洗掉了陣列 改變了陣列的鍵值

22、vue常?的UI組件庫

Mint UI，element，VUX

23、Vue首頁白屏是什么問題引起的？如何解決呢？

點擊打開視頻講解更加詳細

點擊打開文章詳解

24、性能優化篇

點擊打開文章詳解

七、React

1、react的生命周期

生命周期是什么？

react 實體的生命周期，就是react實體從初始化，更新，到銷毀的程序

react實體生命周期經歷三個階段

初始化階段：完成從react組件創建到首次渲染的程序

?更新階段：當呼叫setState函式時，會引起組件的重新渲染

?銷毀階段：完成組件的銷毀

三個階段分別對應的建構式有

初始化階段：

constructor
建構式里，可以做狀態的初始化，接收props的傳值
?componentWillMount： 在渲染前呼叫，相當于vue中的beforeMount

?render
渲染函式，不要在這里修改資料， vue中也有render函式，

componentDidMount
?渲染完畢，在第一次渲染后呼叫，

運行中階段（更新）

當組件的 props 或 state 發生變化時會觸發更新（嚴謹的說，是只要呼叫了setState（）或者改變了props時），組件更新的生命周期呼叫順序如下：

shouldComponentUpdate
是否更新？ 需要回傳true或者false，如果是false，那么組件就不會繼續更新了，

componentWillUpdate
?即將更新，
componentWillReceiveProps(nextProps)： 在組件接收到一個新的 prop (更新后)時被呼叫，
這個方法在初始化render時不會被呼叫，nextProps 是props的新值，而 this.props是舊值，

render
不要在這里修改資料

componentDidUpdate
在組件完成更新后立即呼叫，在初始化時不會被呼叫， 相當于vue中的updated

銷毀階段（卸載）

componentWillUnmount()
即將卸載，可以做一些組件相關的清理作業，例如取消計時器、網路請求等

2、為什么虛擬DOM 會提高性能

? 首先，（虛擬DOM是什么）虛擬DOM就是一個JavaScript物件，通過這個JavaScript物件來描述真實DOM

? 如：

{
    tagName:"p",
    style:"width:200px;height: 100px;",
    innerHTML:"我是p"
},

其次，操作虛擬DOM，就是在操作javascript物件，所以，并不會引起頁面的重繪和重排，而操作真實DOM是會引起頁面的重繪和重排的，

3、React的diff原理

傳統diff演算法
?需要遍歷整棵樹的節點然后進行比較，是一個深度遞回的程序，運算復雜度常常是O(n^3)

react diff的優化策略
DOM節點跨層級的操作不做優化，因為很少這么做，這是針對的tree層級的策略；
對于同一個類的組件，會生成相似的樹形結構，對于不同類的組件，生成不同的樹形結構，這是針對
conponent層級的策略；
對于同一級的子節點，擁有同層唯一的key值，來做洗掉、插入、移動的操作，這是針對element層級
的策略；

4、呼叫setState之后，發生了什么？

合并state
?把傳入setState（）里的引數物件和當前的state進行（屬性）合并， 觸發調和程序
（Reconciliation）

重新渲染組件
React 會以相對高效的方式根據新的狀態構建 React 元素樹并且著手重新渲染整個 UI 界面
React 會自動計算出新的樹與老樹的節點差異（用diff演算法），然后根據差異對界面進行最小化重
渲染

5、state和props的區別

state是組件的狀態，也叫組件內部的資料

?props是組件的屬性，也可以認為是外部給組件傳入的資料

6、React中的setState是同步執行還是異步執行？如果是異步的？怎么拿到執行后的state？

setState是異步的，

如果要拿到修改后的狀態，需要使用回呼函式的方式，如下：

//改變狀態后想做一些事情：
this.setState({
  屬性名:屬性值
}, () => {
  //一般是用于在setState之后做一些操作
  //this.state == 修改之后的state
})

7、為什么不能直接用以下辦法更新state

this.state.msg = “hello”;

因為，這樣不會引起組件的重新渲染，所以，資料修改后沒法 呈現在頁面上，

而呼叫setState()函式，會引起組件的重新渲染，這樣更新的資料就會呈現在頁面上，

點擊打開視頻講解面試技巧+面試全程序，記得一鍵三連哦！感謝支持！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502600.html

標籤：其他

上一篇：大家都能看得懂的原始碼 - ahooks 這些 hook 更優雅管理你的狀態

下一篇：JavaScript快速入門-05-基本陳述句

【全網最全】2022最新版前端 -- 面試題

一、HTML

1、語意話的目的是什么？

2、HTML5新增元素

3、cookie與sessionStorage和localStorage的區別

二、CSS

1、CSS有哪些基本的選擇器，執行先后順序？

2、垂直水平居中方式有哪些？

3、常用布局方式有哪些？什么是盒模型？

4、常用的塊元素與行內元素有哪些？有什么特征

5、清除浮動

6、CSS3新特征

7、CSS中有哪些長度單位？

8、px、em、rem的區別

9、display:none和visibility:hidden的區別

10、用CSS 實作三角形

11、偽類和偽元素的區別

12、什么是重繪，重排？如何解決？

重繪（repaint/redraw）

重排（回流/reflow/重構）

觸發重排的原因

如何解決

13、transition 都有哪些過度屬性？

14、link和@import的區別？

15、常用的影片庫有哪些？

16、什么是BFC

17、href與src的區別

18、如何讓 CSS 只在當前組件中起作用？

三、JS

1、什么是閉包？

2、call、apply、bind 作用和區別（改變this指向）

3、原型與原型鏈

4、JS基本資料型別

5、export和export default的區別

6、箭頭函式和普通函式的區別

7、GET和POST的區別

8、forEach和map的區別

9、物件的繼承

10、簡述一下你理解的面向物件

11、 == 和 ===的區別

12、陣列有哪些方法？

13、 陣列去重（筆試一般都會有）

14、JS中new運算子有什么用？

15、JS獲取HTML DOM元素的方法

16、事件捕獲和事件冒泡

17、虛擬dom

18、排序方式

19、陣列操作方法會改變原陣列

20、JS有幾種方法判斷變數的型別？

21、null和undefined的區別？

(1)、null與undefined的異同點是什么呢？

22、什么是跨域？及跨域解決方法

23、防抖和節流的使用及區別

24、堆疊記憶體和堆記憶體的區別與原理

25、深拷貝和淺拷貝的區別和與原理

四、ES6新特性

Promise

五、計算機網路知識

1、HTTP與HTTPS

2、TCP與UDP的區別

3、HTTP常見的狀態碼

1開頭的狀態碼(資訊類)

2開頭的狀態碼(成功類)

3開頭的狀態碼(重定向)

4開頭的狀態碼(客戶端錯誤)

5開頭的狀態碼(服務器錯誤)

4、瀏覽器從輸入url到頁面加載發生了什么

5、HTTP 傳輸程序

6、瀏覽器如何渲染頁面的？

7、性能優化

8、webpack是怎么打包的，babel又是什么

9、git 和 svn的區別

10、webSocket

11、require和import區別

12、事件回圈（Event Loop）

宏任務、微任務是怎么執行的？

13、什么是單頁面應用（SPA）

14、什么叫優雅降級和漸進增強？

六、VUE

1、MVC和MVVM的理解

13、陣列去重（筆試一般都會有）

Vue父子組件之間傳值

父孫傳值 `$attrs`（向下）`$listeners`（向上）