1.HTML篇
1.Html5 新增的語義化標(biāo)簽有哪些，已及他們的優(yōu)點
答：
1.提升可訪問性
2.seo
3.結(jié)構(gòu)清晰掌逛，利于維護
Header頁面頭部 main頁面主要內(nèi)容 footer頁面底部
Nav導(dǎo)航欄 aside側(cè)邊欄 article加載頁面一塊獨立內(nèi)容
Section相當(dāng)于div figure加載獨立內(nèi)容（上圖下字） figcaption figure的標(biāo)題
Hgroup標(biāo)題組合標(biāo)簽 mark高亮顯示 dialog 加載對話框標(biāo)簽（必須配合open屬性）
Embed加載插件的標(biāo)簽 video加載視頻 audio加載音頻（支持格式ogg壮锻，mp3，wav）
2.<img>的title和alt有什么區(qū)別?
答：
1、alt： 圖片加載失敗時惫恼，顯示在網(wǎng)頁上的替代文字
2理澎、title： 鼠標(biāo)放在上面時顯示的文字
3、alt 是必要屬性煌往，title 非必要
3.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?
答：
1倾哺、標(biāo)簽閉合
2、標(biāo)簽小寫
3刽脖、嵌套正確
4羞海、外部鏈接css和js
5、提倡結(jié)構(gòu)曲管、表現(xiàn)和行為相分離（HTML結(jié)構(gòu)却邓、CSS表現(xiàn)、JavaScript行為）
4.HTML5 為什么只需要寫 <!DOCTYPE HTML>院水？
答：<!DOCTYPE HTML> 是文檔類型聲明腊徙，它聲明了文檔類型為html5，告訴瀏覽器和其他開發(fā)者檬某，該文檔使用的是html5標(biāo)準(zhǔn)
5.Doctype作用? 嚴格模式與混雜模式如何區(qū)分撬腾？它們有何意義?
答：
1. <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前恢恼。告知瀏覽器以何種模式來渲染文檔民傻。
2. 嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
3. 在混雜模式中厅瞎，頁面以寬松的向后兼容的方式顯示饰潜。模擬老式瀏覽器的行為以防止站點無法工作。
4. DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)和簸。
2.css篇
1.盒子水平錘子居中的方法有幾種
答：
方法一
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
方法二
父元素{
display: flex;
justify-content: center;
align-items: center;
}
方法3
父元素{
text-aling:cneter;
height:50px;
line-height:50px;
}
子元素{
display:inline-block;//inline;
}
2.闡述清楚浮動的幾種方式
答：
1彭雾、浮動的產(chǎn)生
float: left/right（設(shè)置后產(chǎn)生浮動）
初衷：浮動原先的設(shè)計初衷是為了實現(xiàn)文字環(huán)繞效果
結(jié)果：父元素高度塌陷，理解起來就是元素浮動飄起來了锁保，失去高度薯酝，下面的元素會頂上來半沽，就造成了原有的元素背景不見了，margin/padding也不能正常顯示
2吴菠、解決浮動的方法
（1）clear: both者填，在元素最后下加一個元素設(shè)置clear：both屬性，缺點是會增加多余無用的html元素
<div class="container">
<div class="left">left浮動</div>
<div class="right">right浮動</div>
<div style="clear:both;"></div>
</div>
（2）使用after偽元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）給父元素設(shè)置明確的高度做葵，缺點是并不是所有元素的高度都是固定
（4）給父級元素設(shè)置overflow:hidden, 缺點：不能和position配合使用
3.請簡要描述margin重合問題占哟，及解決方式
答：
問題：相鄰兩個盒子垂直方向上的margin會發(fā)生重疊，只會取比較大的margin
解決：（1）設(shè)置padding代替margin
（2）設(shè)置float
（3）設(shè)置overflow
（4）設(shè)置position：absolute 絕對定位
（5）設(shè)置display： inline-block
4.為什么要初始化css樣式酿矢？
答：因為瀏覽器的兼容問題榨乎，不同瀏覽器對有些標(biāo)簽的默認值不同，如果不初始化css瘫筐，會導(dǎo)致不同瀏覽器頁面間的顯示差異蜜暑。
5.移動端適配1px問題
答：偽類+transform方法，原理是把原先元素的border去掉策肝，然后利用偽類重做border肛捍，并transform的scale縮小一半，原先的元素相對定位之众，偽類元素絕對定位
6.重繪和回流（哪些情況重繪拙毫，哪些回流）
答;
重繪：不會影響頁面布局的操作，比如更改顏色
回流：布局的改變導(dǎo)致需要重新構(gòu)建就是回流
回流必將引起重繪酝枢，重繪不一定引起回流
7.居中為什么要使用transform（為什么不使用marginLeft/Top）
transform 屬于合成屬性恬偷，不會引起整個頁面的回流重繪，節(jié)省性能消耗帘睦，但是占用內(nèi)存會大些
top/left屬于布局屬性袍患，會引起頁面layout回流和repaint重繪。
8.link和@import的區(qū)別
答：
區(qū)別
1.從屬關(guān)系區(qū)別
@import是 CSS 提供的語法規(guī)則竣付，只有導(dǎo)入樣式表的作用诡延；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件古胆，還可以定義 RSS肆良、rel 連接屬性等。
2.加載順序區(qū)別
加載頁面時逸绎，link標(biāo)簽引入的 CSS 被同時加載惹恃；@import引入的 CSS 將在頁面加載完畢后被加載。
3.兼容性區(qū)別
@import是 CSS2.1 才有的語法棺牧，故只可在 IE5+ 才能識別巫糙；link標(biāo)簽作為 HTML 元素，不存在兼容性問題颊乘。
4.DOM可控性區(qū)別
可以通過 JS 操作 DOM 参淹，插入link標(biāo)簽來改變樣式醉锄；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式浙值。
5.權(quán)重區(qū)別(該項有爭議恳不，下文將詳解)
link引入的樣式權(quán)重大于@import引入的樣式。
結(jié)論：強烈建議使用link標(biāo)簽开呐，慎用@import方式烟勋。
這樣可以避免考慮@import的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和http請求過多的煩惱负蚊。
9神妹、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢家妆？
答：偶數(shù)字體，因為使用奇數(shù)號字體不好的地方是冕茅，文本段落無法對齊伤极。
10.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的姨伤？
答：盒子模型由四個屬性組成的外邊距(margin)哨坪、內(nèi)邊距(padding)、邊界(border)乍楚、內(nèi)容區(qū)(width和height);
標(biāo)準(zhǔn)的CSS盒子模型和低端IE CSS盒子模型不同：寬高不一樣
標(biāo)準(zhǔn)的css盒子模型寬高就是內(nèi)容區(qū)寬高当编；
低端IE css盒子模型寬高 內(nèi)邊距﹢邊界﹢內(nèi)容區(qū)；
js篇
1.es6的新特性
答：const let
模板字符串
箭頭函數(shù)
函數(shù)的參數(shù)默認值
對象和數(shù)組解構(gòu)
for...of 和 for...in
2.原型鏈和作用域鏈的區(qū)別
答：
（1）原型鏈
當(dāng)訪問一個對象的某個屬性時徒溪，會先在這個對象本身的屬性上找忿偷，如果沒有找到，會去這個屬性的__proto__屬性上找臊泌，即這個構(gòu)造函數(shù)的prototype鲤桥，如果還沒找到，就會繼續(xù)在__proto__上查找渠概，
直到最頂層茶凳，找不到即為undefined。這樣一層一層往上找播揪，彷佛是一條鏈子串起來贮喧，所以叫做原型鏈。
（2）作用域鏈
變量取值會到創(chuàng)建這個變量的函數(shù)的作用域中取值猪狈，如果找不到箱沦，就會向上級作用域去查，直到查到全局作用域罪裹，這么一個查找過程形成的鏈條就叫做作用域鏈饱普。
（3）區(qū)別
作用域是對變量而言运挫，原型鏈?zhǔn)菍τ趯ο蟮膶傩远?作用域鏈的頂層是window，原型鏈的頂層是Object
3.js數(shù)據(jù)類型有哪些套耕，js判斷類型的方法有哪些
答：原始數(shù)據(jù)類型Undefined谁帕、Null、Boolean冯袍、Number和String和一種引用類型Object匈挖，Object本質(zhì)是一組無序的名值對組成的
判斷類型的方法
1、typeof
檢測不出null 和 數(shù)組康愤，結(jié)果都為object儡循，所以typeof常用于檢測基本類型
2、instanceof
不能檢測出number征冷、boolean择膝、string、undefined检激、null肴捉、symbol類型，所以instancof常用于檢測復(fù)雜類型以及級成關(guān)系
3叔收、constructor
null齿穗、undefined沒有construstor方法，因此constructor不能判斷undefined和null饺律。
但是contructor的指向是可以被改變窃页，所以不安全
4、Object.prototype.toString.call
全類型都可以判斷
4.普通函數(shù)和箭頭函數(shù)的區(qū)別
答：1复濒、普通函數(shù)
可以通過bind脖卖、call、apply改變this指向
可以使用new
2芝薇、箭頭函數(shù)
本身沒有this指向胚嘲，
它的this在定義的時候繼承自外層第一個普通函數(shù)的this
被繼承的普通函數(shù)的this指向改變，箭頭函數(shù)的this指向會跟著改變
箭頭函數(shù)外層沒有普通函數(shù)時洛二，this指向window
不能通過bind馋劈、call、apply改變this指向
使用new調(diào)用箭頭函數(shù)會報錯晾嘶，因為箭頭函數(shù)沒有constructor
5.如何用原生js給一個按鈕綁定兩個onclick事件妓雾？
答：addEventListener綁定
6.document.write和innerHTML的區(qū)別
document.write 將內(nèi)容寫入頁面，清空替換掉原來的內(nèi)容垒迂，會導(dǎo)致重繪
document.innerHTML 將內(nèi)容寫入某個Dom節(jié)點械姻，不會重繪
7.棧和堆的區(qū)別
答：1、堆
動態(tài)分配內(nèi)存机断，內(nèi)存大小不一楷拳，也不會自動釋放
2绣夺、棧
自動分配相對固定大小的內(nèi)存空間，并由系統(tǒng)自動釋放
3欢揖、基本類型都是存儲在棧中陶耍，每種類型的數(shù)據(jù)占用的空間的大小是確定的，并由系統(tǒng)自動分配和釋放她混。內(nèi)存可以及時回收烈钞。
4、引用類型的數(shù)據(jù)都是存儲在堆中坤按。準(zhǔn)確說是棧中會存儲這些數(shù)據(jù)的地址指針毯欣，并指向堆中的具體數(shù)據(jù)。
8.undefined 和 null 區(qū)別
答：null已定義臭脓，值為空酗钞，undefined聲明了一個變量，但沒有賦值
9.JS哪些操作會造成內(nèi)存泄露
答：內(nèi)存泄漏是指一塊被分配的內(nèi)存既不能使用来累，也不能回收算吩，直到瀏覽器進程結(jié)束。
1佃扼、意外的全局變量
2、閉包
3蔼夜、沒有清理的dom元素
dom元素賦值給變量兼耀，又通過removeChild移除dom元素。但是dom元素的引用還在內(nèi)存中
4求冷、被遺忘的定時器或者回調(diào)
10.談?wù)劺厥諜C制方式及內(nèi)存管理
答：JavaScript 在定義變量時就完成了內(nèi)存分配瘤运。當(dāng)不在使用變量了就會被回收，因為其開銷比較大匠题，垃圾收集器會定期（周期性）找出那些不在繼續(xù)使用的變量拯坟，然后釋放其內(nèi)存。
（1）垃圾回收
標(biāo)記清除法
當(dāng)變量進入環(huán)境時韭山，將這個變量標(biāo)記為'進入環(huán)境'郁季。當(dāng)標(biāo)記離開環(huán)境時，標(biāo)記為‘離開環(huán)境’钱磅。離開環(huán)境的變量會被回收
引用技計數(shù)法
跟蹤記錄每個值被引用的次數(shù)梦裂，如果沒有被引用，就會回收
（2）內(nèi)存管理
內(nèi)存分配=》內(nèi)存使用=》內(nèi)存回收
11.請解釋一下JavaScript的同源策略
答：同源指協(xié)議盖淡，域名年柠，端口相同，
同源策略是一種安全協(xié)議褪迟，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性冗恨。
12.關(guān)于JS事件冒泡與JS事件代理（事件委托）
答：（1）事件冒泡
當(dāng)一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級答憔，一直到window，過程就像冒泡泡 掀抹。如果在某一層想要中止冒泡虐拓，使用 event.stopPropagation() 。
但是當(dāng)大量標(biāo)簽大量事件的時候先然不可能為每個元素都加上事件渴丸，（事件綁定占用事件侯嘀，瀏覽器要跟蹤每個事件，占用更多內(nèi)存谱轨。而且并不是所有事件都會被用戶使用到）戒幔。所以需要事件委托來解決這個問題。
（2）事件委托
將事件給最外層的元素土童，自己不實現(xiàn)邏輯诗茎，由最外層元素來代理。（判斷事件源献汗，做不同處理）
13.JS為什么要區(qū)分微任務(wù)和宏任務(wù)
答：
（1）js是單線程的敢订，但是分同步異步
（2）微任務(wù)和宏任務(wù)皆為異步任務(wù)，它們都屬于一個隊列
（3）宏任務(wù)一般是：script罢吃，setTimeout楚午，setInterval、setImmediate
（4）微任務(wù)：原生Promise
（5）遇到微任務(wù)尿招，先執(zhí)行微任務(wù)矾柜，執(zhí)行完后如果沒有微任務(wù)，就執(zhí)行下一個宏任務(wù)就谜，如果有微任務(wù)怪蔑，就按順序一個一個執(zhí)行微任務(wù)
14.客戶端瀏覽器一次http完整請求過程
1）：DNS解析域名得到IP地址
2）：客戶端與服務(wù)器建立連接(TCP三次握手)
3）：客戶端發(fā)起請求
4）：服務(wù)器接收到請求根據(jù)端口號.路徑等找到對應(yīng)資源文件，響應(yīng)源代碼給客戶端
5）：客戶端拿到請求到的數(shù)據(jù)(html頁面的源代碼)丧荐，開始解析頁面以及請求資源
6）：客戶端渲染頁面
7）：web服務(wù)器斷開連接(四次揮手)
TCP三次握手
第一次握手：客戶端發(fā)送一個帶 SYN=1缆瓣，Seq=X 的數(shù)據(jù)包到服務(wù)器端口（第一次握手，由瀏覽器發(fā)起虹统，告訴服務(wù)器我要發(fā)送請求了）
第二次握手服務(wù)器發(fā)回一個帶 SYN=1弓坞， ACK=X+1， Seq=Y 的響應(yīng)包以示傳達確認信息（第二次握手窟却，由服務(wù)器發(fā)起昼丑，告訴瀏覽器我準(zhǔn)備接受了，你趕緊發(fā)送吧）
第三次握手：客戶端再回傳一個帶 ACK=Y+1夸赫， Seq=Z 的數(shù)據(jù)包菩帝，代表“握手結(jié)束”（第三次握手，由瀏覽器發(fā)送，告訴服務(wù)器呼奢，我馬上就發(fā)了宜雀，準(zhǔn)備接受吧）
TCP四次揮手
第一次揮手：發(fā)起方向被動方發(fā)送報文，F(xiàn)in握础、Ack辐董、Seq，表示已經(jīng)沒有數(shù)據(jù)傳輸了。并進入 FIN_WAIT_1 狀態(tài)。(第一次揮手：由瀏覽器發(fā)起的虱肄，發(fā)送給服務(wù)器伺帘，我請求報文發(fā)送完了代嗤，你準(zhǔn)備關(guān)閉吧)
第二次揮手：被動方發(fā)送報文，Ack、Seq，表示同意關(guān)閉請求覆旭。此時主機發(fā)起方進入 FIN_WAIT_2 狀態(tài)。(第二次揮手：由服務(wù)器發(fā)起的岖妄，告訴瀏覽器型将，我請求報文接受完了，我準(zhǔn)備關(guān)閉了荐虐，你也準(zhǔn)備吧)
第三次揮手：被動方向發(fā)起方發(fā)送報文段七兜，F(xiàn)in、Ack福扬、Seq惊搏，請求關(guān)閉連接。并進入 LAST_ACK 狀態(tài)忧换。(第三次揮手：由服務(wù)器發(fā)起，告訴瀏覽器向拆，我響應(yīng)報文發(fā)送完了亚茬，你準(zhǔn)備關(guān)閉吧)
第四次揮手：發(fā)起方向被動方發(fā)送報文段，Ack浓恳、Seq刹缝。然后進入等待 TIME_WAIT 狀態(tài)。被動方收到發(fā)起方的報文段以后關(guān)閉連接颈将。發(fā)起方等待一定時間未收到回復(fù)梢夯，則正常關(guān)閉。(第四次揮手：由瀏覽器發(fā)起晴圾，告訴服務(wù)器颂砸，我響應(yīng)報文接受完了，我準(zhǔn)備關(guān)閉了，你也準(zhǔn)備吧)
15.瀏覽器渲染過程
1.根據(jù) HTML 解析出 DOM 樹
2.根據(jù) CSS 解析生成 CSS 規(guī)則樹
3.結(jié)合 DOM 樹和 CSS 規(guī)則樹人乓，生成渲染樹
4.根據(jù)渲染樹計算每一個節(jié)點的信息
5.根據(jù)計算好的信息繪制頁面
1）根據(jù) HTML 解析 DOM 樹
根據(jù) HTML 的內(nèi)容勤篮，將標(biāo)簽按照結(jié)構(gòu)解析成為 DOM 樹，DOM 樹解析的過程是一個深度優(yōu)先遍歷色罚。即先構(gòu)建當(dāng)前節(jié)點的所有子節(jié)點碰缔，再構(gòu)建下一個兄弟節(jié)點。在讀取 HTML 文檔戳护，構(gòu)建 DOM 樹的過程中金抡，若遇到 script 標(biāo)簽，則 DOM 樹的構(gòu)建會暫停腌且，直至腳本執(zhí)行完畢梗肝。
2）根據(jù) CSS 解析生成 CSS 規(guī)則樹
解析 CSS 規(guī)則樹時 js 執(zhí)行將暫停，直至 CSS 規(guī)則樹就緒切蟋。瀏覽器在 CSS 規(guī)則樹生成之前不會進行渲染统捶。
3）結(jié)合 DOM 樹和 CSS 規(guī)則樹，生成渲染樹
DOM 樹和 CSS 規(guī)則樹全部準(zhǔn)備好了以后柄粹，瀏覽器才會開始構(gòu)建渲染樹喘鸟。精簡 CSS 并可以加快 CSS 規(guī)則樹的構(gòu)建，從而加快頁面相應(yīng)速度驻右。
4）根據(jù)渲染樹計算每一個節(jié)點的信息（布局）
布局：通過渲染樹中渲染對象的信息什黑，計算出每一個渲染對象的位置和尺寸
回流：在布局完成后，發(fā)現(xiàn)了某個部分發(fā)生了變化影響了布局堪夭，那就需要倒回去重新渲染愕把。
5）根據(jù)計算好的信息繪制頁面
繪制階段，系統(tǒng)會遍歷呈現(xiàn)樹森爽，并調(diào)用呈現(xiàn)器的“paint”方法恨豁，將呈現(xiàn)器的內(nèi)容顯示在屏幕上。
重繪：某個元素的背景顏色爬迟，文字顏色等橘蜜，不影響元素周圍或內(nèi)部布局的屬性，將只會引起瀏覽器的重繪付呕。
回流：某個元素的尺寸發(fā)生了變化计福，則需重新計算渲染樹，重新渲染徽职。
16.HTTP狀態(tài)碼分類
1xx 客戶端提出請求象颖，等待服務(wù)器處理
2xx 成功
3xx 重定向（登錄完之后，直接跳到指定界面）
4xx 客戶端錯
5xx 服務(wù)端錯
1xx
這一類型的狀態(tài)碼姆钉，代表請求已被接受说订，需要繼續(xù)處理抄瓦。這類響應(yīng)是臨時響應(yīng)，只包含狀態(tài)行和某些可選的響應(yīng)頭信息克蚂，并以空行結(jié)束闺鲸。
2xx
這一類型的狀態(tài)碼，代表請求已成功被服務(wù)器接收埃叭、理解摸恍、并接受。
3xx
這類狀態(tài)碼代表需要客戶端采取進一步的操作才能完成請求赤屋。通常立镶，這些狀態(tài)碼用來重定向，后續(xù)的請求地址（重定向目標(biāo)）在本次響應(yīng)的 location 域中指明类早。
4xx
這類的狀態(tài)碼代表了客戶端看起來可能發(fā)生了錯誤媚媒，妨礙了服務(wù)器的處理。除非響應(yīng)的是一個 HEAD 請求涩僻，否則服務(wù)器就應(yīng)該返回一個解釋當(dāng)前錯誤狀況的實體缭召，以及這是臨時的還是永久性的狀況。這些狀態(tài)碼適用于任何請求方法逆日。瀏覽器應(yīng)當(dāng)向用戶顯示任何包含在此類錯誤響應(yīng)中的實體內(nèi)容嵌巷。
5xx
這類狀態(tài)碼代表了服務(wù)器在處理請求的過程中有錯誤或者異常狀態(tài)發(fā)生，也有可能是服務(wù)器意識到以當(dāng)前的軟硬件資源無法完成對請求的處理室抽。除非這是一個HEAD 請求搪哪，否則服務(wù)器應(yīng)當(dāng)包含一個解釋當(dāng)前錯誤狀態(tài)以及這個狀況是臨時的還是永久的解釋信息實體。瀏覽器應(yīng)當(dāng)向用戶展示任何在當(dāng)前響應(yīng)中被包含的實體坪圾。
200 OK：服務(wù)器成功處理了請求（這個是我們見到最多的）
301 Moved Permanently：資源移動晓折。所請求資源自動到新的URL，瀏覽器自動跳轉(zhuǎn)到新的URL
304 Not Modified：服務(wù)端的資源與客戶端上一次請求的一致兽泄，不需要重新傳輸漓概，客戶端使用本地緩存的即可
400 Bad Request：用于告訴客戶端它發(fā)送了一個錯誤的請求
404 Not Found：(頁面丟失)未找到資源
500 Internal Server Error：服務(wù)器內(nèi)部出現(xiàn)了錯誤
501 Internal Server Error：服務(wù)器遇到一個錯誤，使其無法對請求提供服務(wù)
vue篇
vue工作原理
***把一個普通對象傳給 Vue 實例作為它的 data 選項病梢，Vue.js 將遍歷它的屬性垛耳，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。這是 ES5 特性飘千，不能打補丁實現(xiàn)，這便是為什么 Vue.js 不支持 IE8 及更低版本栈雳。
1.Observer利用Object.defineProperty护奈，將要觀察的對象(data)，轉(zhuǎn)化成getter/setter哥纫，以便攔截對象賦值與取值操作
2.Compiler需要將DOM解析霉旗，提取其中的指令與占位符，并賦與不同的操作
3.Watcher需要將Compile的解析結(jié)果，與Observer所觀察的對象連接起來厌秒，建立關(guān)系读拆，在Observer觀察到對象數(shù)據(jù)變化時，接收通知鸵闪，同時更新DOM
4.最后檐晕，需要一個公共入口對象，接收配置蚌讼，協(xié)調(diào)上述三者辟灰，稱為Vue;
1.vue優(yōu)點？
答：輕量級框架：只關(guān)注視圖層篡石，是一個構(gòu)建數(shù)據(jù)的視圖集合芥喇，大小只有幾十kb；
簡單易學(xué)：國人開發(fā)凰萨，中文文檔继控，不存在語言障礙 ，易于理解和學(xué)習(xí)胖眷；
雙向數(shù)據(jù)綁定：保留了angular的特點武通，在數(shù)據(jù)操作方面更為簡單；
組件化：保留了react的優(yōu)點瘦材，實現(xiàn)了html的封裝和重用厅须，在構(gòu)建單頁面應(yīng)用方面有著獨特的優(yōu)勢；
視圖食棕，數(shù)據(jù)朗和，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單，不需要進行邏輯代碼的修改簿晓，只需要操作數(shù)據(jù)就能完成相關(guān)操作眶拉；
虛擬DOM：dom操作是非常耗費性能的， 不再使用原生的dom操作節(jié)點憔儿，極大解放dom操作忆植，但具體操作的還是dom不過是換了另一種方式；
運行速度更快:相比較與react而言谒臼，同樣是操作虛擬dom朝刊，就性能而言，vue存在很大的優(yōu)勢蜈缤。
2.vue父組件向子組件傳遞數(shù)據(jù)拾氓？子組件像父組件傳遞事件？
答：props底哥，$emit
3.v-show和v-if指令的共同點和不同點咙鞍？
答: 共同點：都能控制元素的顯示和隱藏房官；
不同點：實現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none续滋，控制隱藏翰守，只會編譯一次；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素疲酌，若初始值為false蜡峰，就不會編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能徐勃。
總結(jié)：如果要頻繁切換某節(jié)點事示，使用v-show(切換開銷比較小，初始開銷較大)僻肖。如果不需要頻繁切換某節(jié)點使用v-if（初始渲染開銷較小肖爵，切換開銷比較大）。
4.為什么使用key?
答：需要使用key來給每個節(jié)點做一個唯一標(biāo)識臀脏，Diff算法就可以正確的識別此節(jié)點劝堪。
作用主要是為了高效的更新虛擬DOM。
5.v-modal的使用揉稚。
答：v-model用于表單數(shù)據(jù)的雙向綁定秒啦，其實它就是一個語法糖，這個背后就做了兩個操作：
v-bind綁定一個value屬性搀玖；
v-on指令給當(dāng)前元素綁定input事件余境。
6.分別簡述computed和watch的使用場景
答：computed:
當(dāng)一個屬性受多個屬性影響的時候就需要用到computed
最典型的栗子： 購物車商品結(jié)算的時候
watch:
當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch
栗子：搜索數(shù)據(jù)
7.$nextTick的使用
答：當(dāng)你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更新后的值灌诅，
你需要使用$nextTick這個回調(diào)芳来，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功猜拾。
8.vue組件中data為什么必須是一個函數(shù)即舌？
答：因為JavaScript的特性所導(dǎo)致，在component中挎袜，data必須以函數(shù)的形式存在顽聂，不可以是對象。
組建中的data寫成一個函數(shù)盯仪，數(shù)據(jù)以函數(shù)返回值的形式定義紊搪，這樣每次復(fù)用組件的時候，都會返回一份新的data全景，相當(dāng)于每個組件實例都有自己私有的數(shù)據(jù)空間耀石，它們只負責(zé)各自維護的數(shù)據(jù)，不會造成混亂蚪燕。而單純的寫成對象形式娶牌，就是所有的組件實例共用了一個data，這樣改一個全都改了馆纳。
9.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的诗良？
答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的， 也就是說數(shù)據(jù)和視圖同步鲁驶，數(shù)據(jù)發(fā)生變化鉴裹，視圖跟著變化，視圖變化钥弯，數(shù)據(jù)也隨之發(fā)生改變径荔；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法脆霎。
10.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
答：單頁面應(yīng)用（SPA）总处，通俗一點說就是指只有一個主頁面的應(yīng)用，瀏覽器一開始要加載所有必須的 html, js, css睛蛛。所有的頁面內(nèi)容都包含在這個所謂的主頁面中鹦马。但在寫的時候，還是會分開寫（頁面片段）忆肾，然后在交互的時候由路由程序動態(tài)載入荸频，單頁面的頁面跳轉(zhuǎn)，僅刷新局部資源客冈。多應(yīng)用于pc端旭从。
多頁面（MPA），就是指一個應(yīng)用中有多個頁面场仲，頁面跳轉(zhuǎn)時是整頁刷新
單頁面的優(yōu)點：
用戶體驗好和悦，快，內(nèi)容的改變不需要重新加載整個頁面燎窘，基于這一點spa對服務(wù)器壓力較心∶觥；前后端分離褐健；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）付鹿。
單頁面缺點：
不利于seo；導(dǎo)航不可用蚜迅，如果一定要導(dǎo)航需要自行實現(xiàn)前進舵匾、后退。（由于是單頁面不能用瀏覽器的前進后退功能谁不，所以需要自己建立堆棧管理）坐梯；初次加載時耗時多；頁面復(fù)雜度提高很多刹帕。
11.Vue2中注冊在router-link上事件無效解決方法
答： 使用@click.native吵血。原因：router-link會阻止click事件谎替，.native指直接監(jiān)聽一個原生事件。
12.axios的特點有哪些
答：從瀏覽器中創(chuàng)建XMLHttpRequests蹋辅；
node.js創(chuàng)建http請求钱贯；
支持Promise API；
攔截請求和響應(yīng)侦另；
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)秩命；
取消請求；
自動換成json褒傅。
缺點
弃锐。對搜索引擎不友好
。 要實現(xiàn)Ajax下的前后退功能成本較大
殿托∨眨跨域問題限制
axios中的發(fā)送字段的參數(shù)是data跟params兩個，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的碌尔，data的作為一個請求體進行發(fā)送
params一般適用于get請求浇辜，data一般適用于post put 請求。
13.什么是 vue 生命周期唾戚？有什么作用柳洋？
答：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽叹坦、編譯模板熊镣、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)募书，這給了用戶在不同階段添加自己的代碼的機會绪囱。（ps：生命周期鉤子就是生命周期函數(shù)）例如，如果要通過某些插件操作DOM節(jié)點莹捡，如想在頁面渲染完后彈出廣告窗鬼吵， 那我們最早可在mounted 中進行。
beforeCreate：在new一個vue實例后篮赢，只有一些默認的生命周期鉤子和默認事件齿椅，其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時候启泣，data和methods中的數(shù)據(jù)都還沒有初始化涣脚。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法
create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法寥茫，或者操作 data 中的數(shù)據(jù)遣蚀，最早可以在這個階段中操作
beforeMount：執(zhí)行到這個鉤子的時候，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中芭梯，此時险耀，頁面還是舊的
mounted：執(zhí)行到這個鉤子的時候，就表示Vue實例已經(jīng)初始化完成了玖喘。此時組件脫離了創(chuàng)建階段胰耗，進入到了運行階段。 如果我們想要通過插件操作頁面上的DOM節(jié)點芒涡，最早可以在和這個階段中進行
beforeUpdate： 當(dāng)執(zhí)行這個鉤子時，頁面中的顯示的數(shù)據(jù)還是舊的卖漫，data中的數(shù)據(jù)是更新后的费尽， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷毀階段羊始，這個時候上所有的 data 和 methods 旱幼， 指令， 過濾器 ……都是處于可用狀態(tài)突委。還沒有真正被銷毀
destroyed： 這個時候上所有的 data 和 methods 柏卤， 指令， 過濾器 ……都是處于不可用狀態(tài)匀油。組件已經(jīng)被銷毀了缘缚。
14.created和mounted的區(qū)別
答：created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值敌蚜，然后再渲染成視圖桥滨。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后弛车，再對html的dom節(jié)點進行一些需要的操作齐媒。
15.請詳細說下你對vue生命周期的理解？
總共分為8個階段創(chuàng)建前/后纷跛，載入前/后喻括，更新前/后，銷毀前/后贫奠。
創(chuàng)建前/后： 在beforeCreated階段唬血，vue實例的掛載元素$el和**數(shù)據(jù)對象**data都為undefined，還未初始化叮阅。在created階段刁品，vue實例的數(shù)據(jù)對象data有了，$el還沒有浩姥。
載入前/后：在beforeMount階段挑随，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點勒叠，data.message還未替換兜挨。在mounted階段膏孟，vue實例掛載完成，data.message成功渲染拌汇。
更新前/后：當(dāng)data變化時柒桑，會觸發(fā)beforeUpdate和updated方法。
銷毀前/后：在執(zhí)行destroy方法后噪舀，對data的改變不會再觸發(fā)周期函數(shù)魁淳，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在与倡。
16.mvvm 框架是什么界逛？
答：vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當(dāng)視圖改變更新模型層纺座，當(dāng)模型層改變更新視圖層息拜。在vue中，使用了雙向綁定技術(shù)净响，就是View的變化能實時讓Model發(fā)生變化少欺，而Model的變化也能實時更新到View。
17.vue-router的兩種模式
答:hash模式：即地址欄 URL 中的 # 符號馋贤；
history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度赞别。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）配乓。
18.vuex是什么演训？怎么使用欺税？哪種功能場景使用它腾夯？
答：vue框架中狀態(tài)管理纯续。在main.js引入store，注入羽莺。
vuex有五種屬性实昨，分別是 State、 Getter盐固、Mutation 荒给、Action、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法刁卜，同步志电！
actions => 像一個裝飾器，包裹mutations蛔趴，使之可以異步挑辆。
modules => 模塊化Vuex
場景有：單頁應(yīng)用中，組件之間的狀態(tài)。音樂播放鱼蝉、登錄狀態(tài)洒嗤、加入購物車
React 面試題
1.區(qū)分Real DOM和Virtual DOM
Real DOM Virtual DOM
1. 更新緩慢。 1. 更新更快魁亦。
2. 可以直接更新 HTML渔隶。 2. 無法直接更新 HTML。
3. 如果元素更新洁奈，則創(chuàng)建新DOM间唉。 3. 如果元素更新，則更新 JSX 利术。
4. DOM操作代價很高终吼。 4. DOM 操作非常簡單。
5. 消耗的內(nèi)存較多氯哮。 5. 很少的內(nèi)存消耗。
2. 什么是React
React 是 Facebook 在 2011 年開發(fā)的前端 JavaScript 庫商佛。它遵循基于組件的方法喉钢，有助于構(gòu)建可重用的UI組件。它用于開發(fā)復(fù)雜和交互式的 Web 和移動 UI良姆。盡管它僅在 2015 年開源肠虽，但有一個很大的支持社區(qū)。
3.React有什么特點
它使用**虛擬DOM **而不是真正的DOM玛追。它可以用服務(wù)器端渲染税课。它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。
4.React的一些主要優(yōu)點
1)它提高了應(yīng)用的性能
2)可以方便地在客戶端和服務(wù)器端使用
3)由于 JSX痊剖，代碼的可讀性很好
4)React 很容易與 Meteor韩玩，Angular 等其他框架集成
5)使用React，編寫UI測試用例變得非常容易
5.React有哪些限制
1)React 只是一個庫陆馁，而不是一個完整的框架
2)它的庫非常龐大找颓，需要時間來理解
3)新手程序員可能很難理解
4)編碼變得復(fù)雜，因為它使用內(nèi)聯(lián)模板和 JSX
6.什么是JSX
JSX 是J avaScript XML 的簡寫叮贩。是 React 使用的一種文件击狮，它利用 JavaScript 的表現(xiàn)力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解益老。此文件能使應(yīng)用非潮肱睿可靠，并能夠提高其性能
7.Virtual DOM工作原理
Virtual DOM 是一個輕量級的 JavaScript 對象捺萌，它最初只是 real DOM 的副本档冬。它是一個節(jié)點樹，它將元素、它們的屬性和內(nèi)容作為對象及其屬性捣郊。 React 的渲染函數(shù)從 React 組件中創(chuàng)建一個節(jié)點樹辽狈。然后它響應(yīng)數(shù)據(jù)模型中的變化來更新該樹，該變化是由用戶或系統(tǒng)完成的各種動作引起的呛牲。
1)每當(dāng)?shù)讓訑?shù)據(jù)發(fā)生改變時刮萌，整個 UI 都將在 Virtual DOM 描述中重新渲染
2)然后計算之前 DOM 表示與新表示的之間的差異
3)完成計算后，將只用實際更改的內(nèi)容更新 real DOM
8.為什么瀏覽器無法讀取JSX
瀏覽器只能處理 JavaScript 對象娘扩，而不能讀取常規(guī) JavaScript 對象中的 JSX着茸。所以為了使瀏覽器能夠讀取 JSX，首先琐旁，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript 對象涮阔，然后再將其傳給瀏覽器。
9.你理解“在React中灰殴，一切都是組件”這句話嗎
組件是 React 應(yīng)用 UI 的構(gòu)建塊敬特。這些組件將整個 UI 分成小的獨立并可重用的部分。每個組件彼此獨立牺陶，而不會影響 UI 的其余部分伟阔。
10.解釋 React 中 render() 的目的
每個React組件強制要求必須有一個 render()。它返回一個 React 元素掰伸，是原生 DOM 組件的表示皱炉。如果需要渲染多個 HTML 元素，則必須將它們組合在一個封閉標(biāo)記內(nèi)狮鸭，例如 <form>合搅、<group>、<div> 等歧蕉。此函數(shù)必須保持純凈灾部，即必須每次調(diào)用時都返回相同的結(jié)果。
11.什么是 Props
Props 是 React 中屬性的簡寫惯退。它們是只讀組件梳猪，必須保持純，即不可變蒸痹。它們總是在整個應(yīng)用中從父組件傳遞到子組件春弥。子組件永遠不能將 prop 送回父組件。這有助于維護單向數(shù)據(jù)流叠荠，通常用于呈現(xiàn)動態(tài)生成的數(shù)據(jù)
12.React中的狀態(tài)是什么匿沛？它是如何使用的
狀態(tài)是 React 組件的核心，是數(shù)據(jù)的來源榛鼎，必須盡可能簡單逃呼”罟拢基本上狀態(tài)是確定組件呈現(xiàn)和行為的對象。與props 不同抡笼，它們是可變的苏揣，并創(chuàng)建動態(tài)和交互式組件⊥埔觯可以通過 this.state() 訪問它們
13. React 中的箭頭函數(shù)是什么平匈？怎么用
箭頭函數(shù)（=>）是用于編寫函數(shù)表達式的簡短語法。這些函數(shù)允許正確綁定組件的上下文藏古，因為在 ES6 中默認下不能使用自動綁定增炭。使用高階函數(shù)時，箭頭函數(shù)非常有用
14.區(qū)分狀態(tài)State和 props
條件 State Props
1. 從父組件中接收初始值 Yes Yes
2. 父組件可以改變值 No Yes
3. 在組件中設(shè)置默認值 Yes Yes
4. 在組件的內(nèi)部變化 Yes No
5. 設(shè)置子組件的初始值 Yes Yes
6. 在子組件的內(nèi)部更改 No Yes
15.區(qū)分有狀態(tài)和無狀態(tài)組件
有狀態(tài)組件
1. 在內(nèi)存中存儲有關(guān)組件狀態(tài)變化的信息
2. 有權(quán)改變狀態(tài)
3. 包含過去拧晕、現(xiàn)在和未來可能的狀態(tài)變化情況
4. 接受無狀態(tài)組件狀態(tài)變化要求的通知隙姿，然后將 props 發(fā)送給他們。
無狀態(tài)組件
1. 計算組件的內(nèi)部的狀態(tài)
2. 無權(quán)改變狀態(tài)
3. 不包含過去厂捞，現(xiàn)在和未來可能發(fā)生的狀態(tài)變化情況
4.從有狀態(tài)組件接收 props 并將其視為回調(diào)函數(shù)输玷。
16.React組件生命周期的階段是什么
*初始渲染階段：*這是組件即將開始其生命之旅并進入 DOM 的階段。
*更新階段：*一旦組件被添加到 DOM靡馁，它只有在 prop 或狀態(tài)發(fā)生變化時才可能更新和重新渲染欲鹏。這些只發(fā)生在這個階段。
*卸載階段：*這是組件生命周期的最后階段奈嘿，組件被銷毀并從 DOM 中刪除。
componentWillMount**()** – 在渲染之前執(zhí)行吞加，在客戶端和服務(wù)器端都會執(zhí)行裙犹。
componentDidMount**()** – 僅在第一次渲染后在客戶端執(zhí)行。
componentWillReceiveProps**()** – 當(dāng)從父類接收到 props 并且在調(diào)用另一個渲染器之前調(diào)用衔憨。
shouldComponentUpdate**()** – 根據(jù)特定條件返回 true 或 false叶圃。如果你希望更新組件，請返回true 否則返回 false践图。默認情況下掺冠，它返回 false。
componentWillUpdate**()** – 在 DOM 中進行渲染之前調(diào)用码党。
componentDidUpdate**()** – 在渲染發(fā)生后立即調(diào)用德崭。
componentWillUnmount**()** – 從 DOM 卸載組件后調(diào)用。用于清理內(nèi)存空間揖盘。
17.React中的合成事件是什么
合成事件是圍繞瀏覽器原生事件充當(dāng)跨瀏覽器包裝器的對象眉厨。它們將不同瀏覽器的行為合并為一個 API。這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性兽狭。
18.你對 React 的 refs 有什么了解
Refs 是 React 中引用的簡寫憾股。它是一個有助于存儲對特定的 React 元素或組件的引用的屬性鹿蜀，它將由組件渲染配置函數(shù)返回。用于對 render() 返回的特定元素或組件的引用服球。當(dāng)需要進行 DOM 測量或向組件添加方法時茴恰，它們會派上用場。使用場景：需要管理焦點斩熊、選擇文本或媒體播放時往枣；觸發(fā)式動畫；與第三方 DOM 庫集成
19.什么是高階組件（HOC）
高階組件是重用組件邏輯的高級方法座享，是一種源于 React 的組件模式婉商。 HOC 是自定義組件，在它之內(nèi)包含另一個組件渣叛。它們可以接受子組件提供的任何動態(tài)丈秩，但不會修改或復(fù)制其輸入組件中的任何行為。你可以認為 HOC 是“純（Pure）”組件淳衙。
20.你能用HOC做什么
代碼重用蘑秽，邏輯和引導(dǎo)抽象
渲染劫持
狀態(tài)抽象和控制
Props 控制
21.什么是純組件
純（Pure） 組件是可以編寫的最簡單、最快的組件箫攀。它們可以替換任何只有 render() 的組件肠牲。這些組件增強了代碼的簡單性和應(yīng)用的性能。
22.React 中 key 的重要性是什么
key 用于識別唯一的 Virtual DOM 元素及其驅(qū)動 UI 的相應(yīng)數(shù)據(jù)靴跛。它們通過回收 DOM 中當(dāng)前所有的元素來幫助 React 優(yōu)化渲染缀雳。這些 key 必須是唯一的數(shù)字或字符串，React 只是重新排序元素而不是重新渲染它們梢睛。這可以提高應(yīng)用程序的性能肥印。
23.MVC框架的主要問題是什么？
對 DOM 操作的代價非常高
程序運行緩慢且效率低下
內(nèi)存浪費嚴重
由于循環(huán)依賴性绝葡，組件模型需要圍繞 models 和 views 進行創(chuàng)建
24.解釋一下 Flux
Flux 是一種強制單向數(shù)據(jù)流的架構(gòu)模式深碱。它控制派生數(shù)據(jù)，并使用具有所有數(shù)據(jù)權(quán)限的中心 store 實現(xiàn)多個組件之間的通信藏畅。整個應(yīng)用中的數(shù)據(jù)更新必須只能在此處進行敷硅。 Flux 為應(yīng)用提供穩(wěn)定性并減少運行時的錯誤愉阎。
25.什么是Redux绞蹦？
Redux 是當(dāng)今最熱門的前端開發(fā)庫之一。它是 JavaScript 程序的可預(yù)測狀態(tài)容器榜旦，用于整個應(yīng)用的狀態(tài)管理坦辟。使用 Redux 開發(fā)的應(yīng)用易于測試，可以在不同環(huán)境中運行章办，并顯示一致的行為锉走。
26.Redux遵循的三個原則是什么
1）單一事實來源：***整個應(yīng)用的狀態(tài)存儲在單個 store 中的對象/狀態(tài)樹里滨彻。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化，并調(diào)試或檢查應(yīng)用程序挪蹭。
2）狀態(tài)是只讀的：***改變狀態(tài)的唯一方法是去觸發(fā)一個動作亭饵。動作是描述變化的普通 JS 對象。就像 state 是數(shù)據(jù)的最小表示一樣梁厉，該操作是對數(shù)據(jù)更改的最小表示辜羊。
3）使用純函數(shù)進行更改：***為了指定狀態(tài)樹如何通過操作進行轉(zhuǎn)換，你需要純函數(shù)词顾。純函數(shù)是那些返回值僅取決于其參數(shù)值的函數(shù)八秃。
總結(jié)：Redux 使用 “Store” 將程序的整個狀態(tài)存儲在同一個地方。因此所有組件的狀態(tài)都存儲在 Store 中肉盹，并且它們從 Store 本身接收更新昔驱。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化，并調(diào)試或檢查程序
組成：
Action – 這是一個用來描述發(fā)生了什么事情的對象上忍。
Reducer – 這是一個確定狀態(tài)將如何變化的地方骤肛。
Store – 整個程序的狀態(tài)/對象樹保存在Store中。
View – 只顯示 Store 提供的數(shù)據(jù)窍蓝。
27.如何在 Redux 中定義 Action
React 中的 Action 必須具有 type 屬性腋颠，該屬性指示正在執(zhí)行的 ACTION 的類型。必須將它們定義為字符串常量吓笙，并且還可以向其添加更多的屬性淑玫。在 Redux 中，action 被名為 Action Creators 的函數(shù)所創(chuàng)建面睛。
28.Reducer 的作用
Reducers 是純函數(shù)絮蒿，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng) ACTION 而改變。Reducers 通過接受先前的狀態(tài)和 action 來工作侮穿，然后它返回一個新的狀態(tài)歌径。它根據(jù)操作的類型確定需要執(zhí)行哪種更新毁嗦，然后返回新的值亲茅。如果不需要完成任務(wù)，它會返回原來的狀態(tài)狗准。
29.Store 在 Redux 中的意義是什么
Store 是一個 JavaScript 對象克锣，它可以保存程序的狀態(tài)，并提供一些方法來訪問狀態(tài)腔长、調(diào)度操作和注冊偵聽器袭祟。應(yīng)用程序的整個狀態(tài)/對象樹保存在單一存儲中。因此捞附，Redux 非常簡單且是可預(yù)測的巾乳。我們可以將中間件傳遞到 store 來處理數(shù)據(jù)您没，并記錄改變存儲狀態(tài)的各種操作。所有操作都通過 reducer 返回一個新狀態(tài)胆绊。
30.Redux 有哪些優(yōu)點
結(jié)果的可預(yù)測性 - 由于總是存在一個真實來源氨鹏，即 store ，因此不存在如何將當(dāng)前狀態(tài)與動作和應(yīng)用的其他部分同步的問題压状。
可維護性 - 代碼變得更容易維護仆抵，具有可預(yù)測的結(jié)果和嚴格的結(jié)構(gòu)。
服務(wù)器端渲染 - 你只需將服務(wù)器上創(chuàng)建的 store 傳到客戶端即可种冬。這對初始渲染非常有用镣丑，并且可以優(yōu)化應(yīng)用性能，從而提供更好的用戶體驗娱两。
開發(fā)人員工具 - 從操作到狀態(tài)更改莺匠，開發(fā)人員可以實時跟蹤應(yīng)用中發(fā)生的所有事情。
社區(qū)和生態(tài)系統(tǒng) - Redux 背后有一個巨大的社區(qū)谷婆，這使得它更加迷人慨蛙。一個由才華橫溢的人組成的大型社區(qū)為庫的改進做出了貢獻，并開發(fā)了各種應(yīng)用纪挎。
易于測試 - Redux 的代碼主要是小巧期贫、純粹和獨立的功能。這使代碼可測試且獨立异袄。
組織 - Redux 準(zhǔn)確地說明了代碼的組織方式通砍，這使得代碼在團隊使用時更加一致和簡單。
31.為什么React Router v4中使用 switch 關(guān)鍵字
雖然 <div> ** 用于封裝 Router 中的多個路由烤蜕，當(dāng)你想要僅顯示要在多個定義的路線中呈現(xiàn)的單個路線時封孙，可以使用 “switch” 關(guān)鍵字。使用時讽营，<switch>** 標(biāo)記會按順序?qū)⒁讯x的 URL 與已定義的路由進行匹配虎忌。找到第一個匹配項后，它將渲染指定的路徑橱鹏。從而繞過其它路線膜蠢。
32.列出 React Router 的優(yōu)點
1）就像 React 基于組件一樣，在 React Router v4 中莉兰，API 是 ‘All About Components’挑围。可以將 Router 可視化為單個根組件（<BrowserRouter>）糖荒，其中我們將特定的子路由（<route>）包起來杉辙。
2）無需手動設(shè)置歷史值：在 React Router v4 中，我們要做的就是將路由包裝在 <BrowserRouter> 組件中捶朵。
3）包是分開的：共有三個包蜘矢，分別用于 Web狂男、Native 和 Core。這使我們應(yīng)用更加緊湊品腹〔⒘埽基于類似的編碼風(fēng)格很容易進行切換。
