一、HTML + CSS

1、常用實(shí)用技巧

01徽职、定位：

position:absolute/relative/fixed/static

static:靜態(tài)定位；

absolute:絕對定位佩厚，?絕對定位的元素相對于最近的定位祖先元素進(jìn)行定位姆钉。然而，如果絕對定位的元素沒有定位祖先抄瓦，它將相對于文檔主體（body）進(jìn)行定位

relative:相對定位潮瓶，相對于自己的初始位置進(jìn)行定位；

fixed:固定定位钙姊，固定定位的元素是相對于視口定位的毯辅，這意味著即使?jié)L動頁面，它也始終位于同一位置煞额。

02思恐、盒模型：

margin:外邊距；

border:邊框膊毁；

padding:內(nèi)邊距胀莹；

content:內(nèi)容；

盒模型的寬：左外邊距+左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框+右外邊距婚温；

盒模型的高：上外邊距+上邊框+上內(nèi)邊距+height+下內(nèi)邊距+下邊框+下外邊距描焰；

03、垂直水品居中(內(nèi)容的垂直水品居中和盒子的垂直水平居中)

(1)缭召、內(nèi)容垂直水品居中：

height=line-height;

text-align:center;

(2)?栈顷、盒子垂直水平居中兩種方法：

方法1：

position:absolute;

left: 50%;

top: 50%;

margin-left: -盒子寬一半；

margin-top:-盒子高一般嵌巷；

方法2：

position:absolute;

left: 50%;

top: 50%;

transform:translate(-50%,-50%);

2萄凤、知識點(diǎn)

01.?HTML5新特性有哪些

新增了語義化標(biāo)簽如header、footer等

新增了視頻（video）音頻（audio）標(biāo)簽

新增了canvas和svg繪圖

新增了地理定位（navigator.geolocation）

新增了拖拽APIsegmentfault.com/a/119000000…

新增了多線程技術(shù)web worker和即時通訊技術(shù)web socket等

02.?CSS3有哪些新特性

增加了transition漸變搪哪、animation動畫靡努、選擇器、陰影box-shadow晓折、彈性布局flex惑朦、媒體查詢@media等

03.?W3C標(biāo)準(zhǔn)有哪些

W3C標(biāo)準(zhǔn)不是一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的總和漓概；

標(biāo)準(zhǔn)分為三個層面漾月，結(jié)構(gòu)(html)、行為(js)胃珍、表現(xiàn)(css)

標(biāo)準(zhǔn)有:

文檔類型需要聲明（DOCTYPE）

編碼格式需要聲明

javascript代碼需要定義

css代碼需要定義

標(biāo)簽名字和標(biāo)簽內(nèi)部屬性名字小寫等

04.?常見的瀏覽器兼容問題有哪些

不同瀏覽器里面的

標(biāo)簽的外間距和內(nèi)間距表現(xiàn)不同梁肿，解決方案：*{margin:0;padding:0},

圖片有默認(rèn)間距,解決方案：父標(biāo)簽設(shè)置font-size:0

05.?CSS偽類選擇器有哪些

:before 在...之前

:after ? 在...之后

:active ? 點(diǎn)擊

:hover ? 鼠標(biāo)懸停

:first-letter ? 所有文字當(dāng)中的第一個

:first-line ?? 所選元素當(dāng)中的第一行

:first-child ? 第一個子元素

:nth-child() ? 獲取子元素

:nth-of-type ? 獲取指定類型的子元素

等等幾十個

06.?什么是子選擇器蜓陌，什么是后代選擇器

表示子選擇器，例如 div>span 獲取div的子標(biāo)簽span

空格 表示后代選擇器吩蔑，例如 div span 獲取div里面所有的span

07.?CSS權(quán)重的優(yōu)先級是怎樣的

??? !important?> 內(nèi)聯(lián)樣式?> id?> class?> 標(biāo)簽名字

??? 權(quán)重可以疊加

08.?瀏覽器怎么做兼容

IE瀏覽器一般使用css hack方式來解決钮热，即在代碼前面加上* 、_烛芬、 +等符號

谷歌一般在屬性前面加上-webkit-來進(jìn)行兼容

火狐一般在屬性前面加上-moz-進(jìn)行兼容

webpack使用postcss給css屬性自動添加前綴隧期，進(jìn)行兼容

09.?平時是怎么做適配的

通常的方案是通過rem配合媒體查詢(@media)來進(jìn)行適配，

標(biāo)簽或者文本設(shè)置大小的時候不設(shè)置px而是設(shè)置rem赘娄，

然后使用媒體查詢根據(jù)屏幕大小來動態(tài)調(diào)整rem大小仆潮，那么所有設(shè)置rem單位的元素都會根據(jù)屏幕發(fā)生改變

010.?rem和em有什么區(qū)別

em是相對于父級標(biāo)簽的字體大小來定義的

rem是相對于html標(biāo)簽的字體大小來定義的

011.?canvas和svg有什么區(qū)別

都可以用來繪制圖形，但是canvas是基于js來繪制的擅憔，svg是基于xml來繪制的

012.?頁面優(yōu)化有哪些方法

（1）減少 HTTP 請求

（2）減少 DOM 元素數(shù)量

（3）從頁面中剝離 JavaScript 與 CSS

（4）移除重復(fù)腳本

（5）使用恰當(dāng)?shù)膱D片格式

13. 語義化的理解鸵闪？

（1）html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于瀏覽器暑诸、搜索引擎解析；

（2）在沒有CSS樣式情況下也以—種文檔格式顯示辟灰，并且是容易閱讀的个榕。

（3）使閱讀源代碼的人更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解芥喇。

二西采、JS+jQuery

1、常用實(shí)用技巧

01.?數(shù)組的常用函數(shù)及其作用

juejin.cn/post/701582…

2继控、知識點(diǎn)

01.?js基本數(shù)據(jù)類型有哪些

基本類型Number 械馆、String、Boolean武通、Null霹崎、Undefined、symbol

引用類型Object

02.?JS當(dāng)中的typeof返回的類型有哪些

number 冶忱、string 尾菇、boolean 、 undefined 囚枪、symbol派诬、function 、object

03.?return链沼，break默赂，continue的區(qū)別是什么

return 必須寫在函數(shù)內(nèi)部，遇到return后函數(shù)內(nèi)部剩余的代碼不再執(zhí)行括勺，直接返回缆八；還可以使用return返回一個值給外面使用

break 跳出循環(huán)曲掰，剩余的循環(huán)不再執(zhí)行

continue??跳出本次循環(huán)，剩余的循環(huán)繼續(xù)執(zhí)行

04.?typeof和instance of 的區(qū)別是什么

typeof判斷對象的類型耀里，返回值有7種可能

number蜈缤、string、boolean冯挎、undefined底哥、symbol、function房官、object

instanceof 判斷是否是對方的實(shí)例化對象趾徽，返回值為true或者false

typeof、instanceof翰守、toString.call()孵奶、constructor

05.?==（寬松相等）和 ===（嚴(yán)格相等）有什么區(qū)別

== 判斷左右兩邊的值是否一致，但是只能判斷值蜡峰，不能判斷類型了袁，也就是說

2?==‘2’是成立的

=== 既判斷值，也判斷類型

06.?js的強(qiáng)制轉(zhuǎn)換和隱式轉(zhuǎn)換是怎樣的

???parseInt,parseFloat,Number?這三種是強(qiáng)制轉(zhuǎn)換

???-=湿颅、*=载绿、/=、%=?是隱式轉(zhuǎn)換

07.?get請求和 post請求的區(qū)別是什么

get請求將參數(shù)放在url當(dāng)中油航，post請求將參數(shù)放在請求體當(dāng)中崭庸，理論上post更安全

因?yàn)閡rl長度大小不能超過1KB?，而get請求又將參數(shù)放在url當(dāng)中谊囚，所以上傳頭像等操作不能使用get請求

08.?什么是冒泡和挖洞

當(dāng)一個子標(biāo)簽觸發(fā)某一個事件(比如click)后怕享，該事件會從頂級父標(biāo)簽一級一級往該標(biāo)簽傳遞，這個過程叫做挖洞（捕獲）

當(dāng)找到該子標(biāo)簽之后事件會再從子標(biāo)簽開始一級一級往父標(biāo)簽傳遞镰踏，這個過程叫做冒泡

09.?js當(dāng)中的事件委托是怎么回事

用事件冒泡的原理函筋，自己所觸發(fā)的事件， 讓他的父元素代替執(zhí)行

010.?call , apply 和bind的區(qū)別

（1）都可以更改this指向

（2）call余境，bind后面的第一個參數(shù)是指向的對象驻呐，第二個參數(shù)是往對象傳的值

（3）apply后面的第一個參數(shù)是指向的對象，第二個參數(shù)是數(shù)組芳来，數(shù)組里面是往對象傳的值（arguments ??全部參數(shù)）

（4）call和apply更改this指向會自動調(diào)用含末，bind需要手動調(diào)用

011.?jsonP的作用是什么，原理是什么

??? 作用:解決跨域問題

??? 原理:動態(tài)創(chuàng)建script標(biāo)簽即舌，回調(diào)函數(shù)

012.?cookie , sessionStorage , localStorage的區(qū)別是什么

（1）都可以用來存儲數(shù)據(jù)

（2）cookie一條數(shù)據(jù)大小不能超過4KB 佣盒，最多不能存儲超過20條，如果沒有設(shè)置過期時間顽聂，那么在瀏覽器關(guān)閉后消失

（3）sessionStorage是會話存儲肥惭，一條大小不能超過5M盯仪，數(shù)量沒有限制，關(guān)掉頁面數(shù)據(jù)消失

（4）localStorage本地存儲蜜葱，一條大小不超過5M全景，數(shù)量沒有限制，除非主動刪除牵囤，否則數(shù)據(jù)不會消失

013爸黄、原型的概念

JavaScript的所有對象中都包含了一個 [proto] 內(nèi)部屬性，這個屬性所對應(yīng)的就是自身的原型JavaScript的函數(shù)對象揭鳞，除了原型 [proto] 之外炕贵，還有 prototype 屬性，當(dāng)函數(shù)對象作為構(gòu)造函數(shù)創(chuàng)建實(shí)例時野崇，該 prototype 屬性值將被作為實(shí)例對象的原型 [proto]

014.?什么是原型鏈称开？

?一個對象A調(diào)用方法的時候，會先從自身找有沒有這個方法乓梨，如果沒有就找自己的原型鳖轰，看有沒有該方法，沒有就繼續(xù)找對象A的父類B的原型扶镀，就這樣一級一級往上找脆霎，稱之為原型鏈。

任何一級找到就直接調(diào)用狈惫，不再往上找，如果到最后都沒找到就報錯?例子：a is not defined;

015.?什么是閉包

閉包指的是一個函數(shù)可以訪問另一個函數(shù)作用域中變量

閉包的行成原因：一個函數(shù)套另一個函數(shù)鹦马，而內(nèi)部的函數(shù)返回到函數(shù)外面胧谈，造成原有作用域鏈不釋放，就會行成閉包荸频。

閉包的作用：模塊化作用域菱肖、儲存變量、封裝私有變量旭从；

缺點(diǎn)：因?yàn)殚]包造成原有作用域鏈不釋放稳强，所以會造成內(nèi)存泄露；

如何解決內(nèi)存泄漏：使用立即執(zhí)行函數(shù)和悦；（借助立即執(zhí)行函數(shù)的執(zhí)行規(guī)則退疫，執(zhí)行之后立即銷毀，不會造成內(nèi)存泄露）

016.?同步異步的區(qū)別是什么

同步流程:提交請求→等待服務(wù)器處理→處理完畢返回?

一次請求之后必須處理完畢后才能處理后續(xù)操作鸽素，處理效率較低褒繁。（例如B/S模式）

異步流程:提交請求→服務(wù)器處理→處理完畢

發(fā)送請求后不需要等待，可以繼續(xù)執(zhí)行后續(xù)操作馍忽。

當(dāng)有消息返回時系統(tǒng)會通知進(jìn)程進(jìn)行處理棒坏，可以提高執(zhí)行效率燕差。（例如AJAX技術(shù)）

017.?ES6語法的新增特性有哪些

（1）let關(guān)鍵字，聲明變量

（2）const關(guān)鍵字坝冕，聲明常量

（3）模板字符串

（4）箭頭函數(shù)

（5）對象和數(shù)組解構(gòu)

（6）數(shù)據(jù)類型Symbol

（7）Set集合和Map集合

（8）Promise對象

（9）引入class關(guān)鍵字

Symbol 函數(shù)棧不能用 new 命令徒探，因?yàn)?Symbol 是原始數(shù)據(jù)類型，不是對象喂窟〔獍担可以接受一個字符串作為參數(shù)，為新創(chuàng)建的 Symbol 提供描述谎替，用來顯示在控制臺或者作為字符串的時候使用偷溺，便于區(qū)分。

Es6當(dāng)中钱贯，函數(shù)在誰的范圍內(nèi)調(diào)用挫掏，函數(shù)內(nèi)部this指向指的就是誰，

Es5當(dāng)中秩命，誰調(diào)用了函數(shù)尉共，函數(shù)內(nèi)部的this指向指的就是誰

018.?var和let的區(qū)別有哪些

（1）可以用var對同一個變量重復(fù)聲明，但是let不可以

（2）var有變量提升弃锐，可以先賦值袄友，后聲明。let沒有變量提升霹菊，只能先聲明剧蚣，后賦值

（3）let聲明的變量?有塊級作用域

019.?嚴(yán)格模式有哪些特性（這里說的嚴(yán)格模式一般指的是es6的嚴(yán)格模式）

（1）變量必須先聲明?在使用??變量提升沒了

（2）嚴(yán)格模式下?刪除后的變量不能使用

（3）嚴(yán)格模式下?函數(shù)內(nèi)部的this指向默認(rèn)指向的是?undefind

（4）嚴(yán)格模式下?定時器?延時器內(nèi)部的this指向的還是window

（5）嚴(yán)格模式下?函數(shù)的參數(shù)的名字不能一樣

（6）嚴(yán)格模式下?塊級作用域當(dāng)中不能聲明函數(shù)

020. 函數(shù)的防抖和節(jié)流

防抖：事件觸發(fā)并經(jīng)過一段時間間隔后執(zhí)行事件處理函數(shù)，如果在這段時間內(nèi)事件又被觸發(fā)了旋廷，那么將重新計時鸠按。

節(jié)流：事件觸發(fā)并經(jīng)過一段時間間隔后執(zhí)行一次事件處理函數(shù)。也就是說不管你觸發(fā)了多少次事件饶碘，在這段事件就只能觸發(fā)一次目尖。

021.?常見的Http狀態(tài)碼有哪些

1XX：信息狀態(tài)碼

100 Continue 繼續(xù)，一般在發(fā)送post請求時扎运，已發(fā)送了http header之后服務(wù)端 將返回此信息瑟曲，表示確認(rèn)，之后發(fā)送具體參數(shù)信息

2XX：成功狀態(tài)碼

200 OK 正常返回信息

201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源

202 Accepted 服務(wù)器已接受請求豪治，但尚未處理

3XX：重定向

301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置洞拨。

302 Found 臨時性重定向。

303 See Other 臨時性重定向鬼吵，且總是使用 GET 請求新的 URI扣甲。

304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。

4XX：客戶端錯誤

400 Bad Request 服務(wù)器無法理解請求的格式琉挖，客戶端不應(yīng)當(dāng)嘗試再次使用相同的 內(nèi)容發(fā)起請求启泣。

401 Unauthorized 請求未授權(quán)。

403 Forbidden 禁止訪問示辈。|

404 Not Found 找不到如何與 URI 相匹配的資源寥茫。

5XX: 服務(wù)器錯誤

500 Internal Server Error 最常見的服務(wù)器端錯誤。

503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護(hù)）矾麻。

三纱耻、Vue

1、知識點(diǎn)

01.?Vue常見的指令及其作用

v-text:綁定文本险耀，不能加載標(biāo)簽

v-html:綁定文本弄喘，可以加載標(biāo)簽

v-bind:?用于綁定數(shù)據(jù)和元素屬性

v-if:條件判斷，為真添加元素甩牺，為假刪除元素

v-for:循環(huán)

v-model:雙向數(shù)據(jù)綁定

v-show:條件判斷蘑志，為真顯示，為假不顯示

02.?v-if和v-for寫在同一個標(biāo)簽會發(fā)生什么

v-for的優(yōu)先級比v-if更高贬派，v-if不起作用

03.?template標(biāo)簽的作用是什么

將元素包裹在一起急但，本身并不會加載到DOM結(jié)構(gòu)當(dāng)中

04.?data為什么必須為函數(shù)

確保每一個組件獨(dú)享一個數(shù)據(jù)對象，而不是共享一個數(shù)據(jù)對象 ?

05.?transition標(biāo)簽的作用

? 設(shè)置過渡效果搞乏，里面只能放置一個元素波桩，且必須配合v-if、 v-show（或者動態(tài)組件请敦、組件根節(jié)點(diǎn)）來使用

如果想要設(shè)置多個元素漸變镐躲，需要使用transition-group

06.?slot插槽的作用是什么，什么是具名插槽

作用是獲取組件中間的內(nèi)容侍筛，有Name值的插槽是具名插槽

07.?v-text和{{}}相比有什么好處

v-text在網(wǎng)速不好數(shù)據(jù)返回遲鈍的情況下匀油，頁面不會出現(xiàn){{}}

08.?computed和watch的區(qū)別什么

computed: 計算屬性 用來計算結(jié)果并返回 有緩存 當(dāng)數(shù)據(jù)發(fā)生變化時 重新計算 不發(fā)生變化時使用緩存數(shù)據(jù)

watch:?是監(jiān)聽某個值的變化 當(dāng)值發(fā)生變化時 執(zhí)行相關(guān)操作

09.?Vue循環(huán)的key作用

Key值的存在保證了唯一性，Vue在執(zhí)行時勾笆，會對節(jié)點(diǎn)進(jìn)行檢查，如果沒有key值桥滨，那么vue檢查到這里有dom節(jié)點(diǎn)窝爪，就會對內(nèi)容清空并賦新值，如果有key值存在齐媒，那么會對新老節(jié)點(diǎn)進(jìn)行對比吮蛹，比較兩者key是否相同历恐，進(jìn)行調(diào)換位置或刪除操作

可以減少渲染次數(shù)，提高渲染性能

010.?axios數(shù)據(jù)請求的特點(diǎn)是什么

1.從瀏覽器中創(chuàng)建XMLHttpRequests；

2.node.js創(chuàng)建http請求求类；

3.支持Promise API；

4.攔截請求和響應(yīng)；

5.轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；

6.取消請求唤崭；

7.自動換成json。

012.?Vue的核心是什么

數(shù)據(jù)驅(qū)動：ViewModel脖律，保證數(shù)據(jù)和視圖的一致性谢肾。

組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

013.?keep-alive的作用是什么

保持組件存活小泉，即便組件消失也不移除

可以用在首頁芦疏、購物車和商品詳情，保持組件存活微姊；

014.?什么是MVVM

?M ?model數(shù)據(jù)模型,為頁面顯示的數(shù)據(jù)

?V ?view?視圖,為當(dāng)前頁面

VM???viewModel,監(jiān)聽數(shù)據(jù)變化酸茴，用戶交互的內(nèi)容，實(shí)質(zhì)就是一個視圖控制器

Controller

015.?Vue生命周期鉤子函數(shù)有哪些（很重要兢交，問vue幾乎必問）

beforeCreate 組件創(chuàng)建之前

created 組件創(chuàng)建以后

beforeMount ? 組件渲染之前

mounted ? 組件渲染以后

beforeUpdate ? 組件更新之前

updated ? 組件更新以后

beforeDestroy ? 組件摧毀之前

destroyed ? 組件摧毀以后

activated (艾克提未忒特) 組件激活 （配合keep-alive使用）

deactivated 組件未激活（配合keep-alive使用）

errorCaptured???當(dāng)子孫組件出錯的時候會調(diào)用這個函數(shù)

016.?Vue怎么進(jìn)行雙向數(shù)據(jù)綁定薪捍，雙向數(shù)據(jù)綁定的原理是什么

??? 使用v-model進(jìn)行雙向綁定

??? 原理:采用數(shù)據(jù)劫持，結(jié)合發(fā)布者-訂閱者模式的方式魁淳，通過Object.defineProperty（）來劫持各個屬性的setter/getter飘诗，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)界逛。

當(dāng)把一個普通 js對象傳給 Vue 實(shí)例來作為它的 data 選項時昆稿，Vue 將遍歷它的屬性，用?Object.defineProperty（）?將它們轉(zhuǎn)為 setter/getter息拜。

用戶看不到 setter/getter溉潭，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化少欺。

017.?Vue組件之間數(shù)據(jù)傳遞的方式有幾種喳瓣，怎么進(jìn)行傳遞

??? 父傳子: 子組件通過props方式接受

子傳父：子組件發(fā)射一個事件$emit,父組件接受事件以后調(diào)用相應(yīng)的函數(shù)

非父子:?使用一個空的Vue對象在第一個組件的點(diǎn)擊事件中，使用$emit方式來發(fā)射事件赞别，在第二個組件的mounted函數(shù)里面使用$on來接收事件

018.?三種路由傳值畏陕？

1?在路徑后面使用：?聲明一個變量，調(diào)用路徑后面跟一個參數(shù)??拿到值的話?this.$route.params.變量名仿滔，Route:肉特惠毁；router:rou（一聲）特

2.使用path來匹配路由，然后通過query來傳遞參數(shù)?崎页，?拿到值要this.$route.qurey.變量名

3.使用name名來匹配路由鞠绰，要使用params來傳遞參數(shù)，拿到值的話使用this.$route.params.變量名

019.?Vue當(dāng)中的事件修飾符有哪些飒焦？

1.

2. ???.prevent表示阻止默認(rèn)事件提交(阻止的是相當(dāng)于a標(biāo)簽的跳轉(zhuǎn)功能）

3. ?.stop阻止事件傳遞(阻止冒泡）

020. 路由當(dāng)中的hash（哈希）模式和history（歷史）模式有什么區(qū)別蜈膨？

hash:url地址后面會跟一個#，地址切換不會導(dǎo)致頁面請求

history:地址后面沒有#，地址切換會導(dǎo)致頁面請求

021.?Vue-Router的鉤子函數(shù)有哪些

（1）翁巍、全局守衛(wèi)

beforeEach 全局前置守衛(wèi)beforeResolve 全局解析守衛(wèi)afterEach ?? 全局后置守衛(wèi)復(fù)制代碼

（2）驴一、獨(dú)享守衛(wèi) ?

beforeEnter復(fù)制代碼

（3）、?組件內(nèi)守衛(wèi)

beforeRouteEnter 組件前置守衛(wèi)??(該守衛(wèi)沒有this)??????????beforeRouteUpdate ?? 路由改變但是組件被復(fù)用時???????????beforeRouteLeave???? 組件后置守衛(wèi)復(fù)制代碼

022.?Vue當(dāng)中的狀態(tài)管理的作用曙咽，以及屬性的作用是什么

Vuex狀態(tài)管理是為了統(tǒng)一管理頁面所需要的數(shù)據(jù)蛔趴，并能夠在整個項目當(dāng)中任意地方來使用這個數(shù)據(jù)，有5個屬性

state:用來存放初始數(shù)據(jù)

mutations：同步方法例朱，用來修改state值

actions：異步方法孝情，需要調(diào)用Mutations中方法來修改State值

getters：計算屬性，類似于組件當(dāng)中的computed屬性

modules：用來管理其他的Vuex對象

一般用來存儲用戶登陸的token（token表示的是用戶登陸的狀態(tài)洒嗤，并不是值得用戶id）;用戶id

缺陷：頁面刷新時箫荡，state中數(shù)據(jù)會丟失

一般解決方案：

（1）、在app.vue的created方法中讀取sessionStorage中的數(shù)據(jù)存儲在store中渔隶，此時用vuex.store的replaceState方法羔挡，替換store的根狀態(tài)

（2）、在beforeunload方法中將store.state存儲到sessionStorage中间唉。

023.?什么是動態(tài)組件绞灼？

<component :is=""></component>?根據(jù)is屬性的值來決定成為什么組件

024.什么是異步組件？

??? 路由加載的時候不會立馬加載呈野，等到需要使用的時候才加載的組件稱之為異步組件

025.?系統(tǒng)修飾符

.ctrl低矮、.alt、.shift被冒、.meta

026. 按鍵修飾符

enter军掂、tab、delete昨悼、esc蝗锥、space、up率触、down终议、left、right

027.?Vue項目當(dāng)中怎么解決跨域問題葱蝗？

在config/index.js 當(dāng)中設(shè)置proxyTable屬性痊剖，如果腳手架為3.0以上版本，則需要新建一個vue.config.js文件進(jìn)行配置

解決跨域的具體方法：juejin.cn/post/703322…

028.?Vue項目怎么打包app

1垒玲、使用命令npm run build 生成一個dist文件夾

2、使用hbuilder創(chuàng)建一個5+app項目找颓，選擇默認(rèn)模板

3合愈、用dist文件夾里面的東西來替換hbuilder創(chuàng)建的項目里面的內(nèi)容

4、選擇原生app-云打包

029.?怎么解決打包空白問題

1、在vue.config.js中添加字段publicPath后面的值從絕對路徑改成相對路徑, /改成./

2佛析、如果靜態(tài)資源在指定文件益老，需要制定輸出路徑outputDir:“dist”

3、把路由的歷史模式給刪除掉

030. vant寸莫、element捺萌、meiziUi組件庫分別有什么區(qū)別

vant:主要做移動端商城類項目

element:是主要做pc端網(wǎng)頁

amaze：主要做移動端

031.?vue全家桶一般都有什么，作用是什么

?Vue-router 路由管理 創(chuàng)建配置路由

Vuex 狀態(tài)管理 統(tǒng)一管理 頁面所需的數(shù)據(jù) ?供全局使用

Vue-cli 用來搭建vue項目

Axios 用來數(shù)據(jù)請求

032.?Vue如何優(yōu)化首屏加載速度膘茎？

(1)?按需加載組件桃纯，不一次性加載所有組件

(2)?減少不必要的網(wǎng)絡(luò)請求；

033.?devDependencies和dependencies的區(qū)別

（1）devDependencies

用于本地開發(fā)披坏，打包時生產(chǎn)環(huán)境不會打包這些依賴

（2）dependencies

開發(fā)環(huán)境能用态坦，生產(chǎn)環(huán)境也能用。生產(chǎn)環(huán)境會被打包

四棒拂、Webpack

1伞梯、知識點(diǎn)

01.?模塊化分類有哪些

A.?瀏覽器端的模塊化

（1）AMD(Asynchronous Module Definition,異步模塊定義) 代表產(chǎn)品為：Require.js

（2）CMD(Common Module Definition,通用模塊定義) 代表產(chǎn)品為：Sea.js

B.?服務(wù)器端的模塊化，服務(wù)器端的模塊化規(guī)范是使用CommonJS規(guī)范：

1.?使用require引入其他模塊或者包

2.?使用exports或者module.exports導(dǎo)出模塊成員

3.?一個文件就是一個模塊帚屉，都擁有獨(dú)立的作用域

C.?ES6模塊化谜诫，ES6模塊化規(guī)范中定義：

1.每一個js文件都是獨(dú)立的模塊

2.導(dǎo)入模塊成員使用import關(guān)鍵字

3.暴露模塊成員使用export關(guān)鍵字

小結(jié)：推薦使用ES6模塊化，因?yàn)锳MD攻旦，CMD局限使用于瀏覽器端喻旷，

CommonJS在服務(wù)器端使用，

ES6模塊化是瀏覽器端和服務(wù)器端通用的規(guī)范.

02.?export default 和 exports有什么區(qū)別

前者是默認(rèn)導(dǎo)出敬特，每個模塊只能有一個掰邢，導(dǎo)入的時候需要用 import XX from‘XXX’這種方式

后者是導(dǎo)出，每個模塊可以有多個伟阔，導(dǎo)入的時候需要用import {XX} from‘XX’的方式

如果在一個模塊中沒有向外暴露成員辣之，其他模塊引入該模塊時將會得到一個空對象

03.?webpack的作用是什么？

webpack是一個流行的前端項目構(gòu)建工具皱炉，提供了模塊化支持怀估，代碼壓縮混淆，解決兼容問題合搅，性能優(yōu)化等特性多搀，提高了開發(fā)效率和項目的可維護(hù)性。

1.?對代碼重新加載翻譯灾部。

2.?合并靜態(tài)資源康铭，減少io

04.?webpack的安裝命令是什么？

npm install webpack webpack-cli -D

05.?webpack當(dāng)中的development和production有什么區(qū)別

前者為開發(fā)模式赌髓，代碼不會進(jìn)行壓縮从藤，打包速度也更快

后者是生產(chǎn)模式催跪，代碼會進(jìn)行壓縮，打包速度相對較慢

06.?如何配置webpack的出口和入口

在webpack.config.js當(dāng)中設(shè)置entry字段夷野，該字段用來配置文件的入口懊蒸，默認(rèn)為src下的index.js

在webpack.config.js當(dāng)中設(shè)置output字段，該字段用來配置文件的出口悯搔，默認(rèn)為dist文件下的main.js

07.?如何配置webpack自動打包的功能

?A.安裝自動打包功能的包:webpack-dev-server

???????npm install webpack-dev-server -D

?B.修改package.json中的dev指令如下：

"scripts":{???????????"dev":"webpack-dev-server"???????? }復(fù)制代碼

C.將引入的js文件路徑更改為：<script src="/bundle.js"></script>（絕對路徑）

D.運(yùn)行npm run dev骑丸，進(jìn)行打包

08.?webpack Loder和plugins區(qū)別

loader是文件加載器，能夠加載資源文件妒貌，并對這些文件進(jìn)行一些處理通危，諸如編譯、壓縮等

plugins 主要是拓展 webpack 功能

09.?webpack怎么打包非js文件

下載文件對應(yīng)的加載器苏揣，然后再webpack.config.js當(dāng)中配置module的語法規(guī)則

010.?webpack如何打包c(diǎn)ss文件

下載style-loader 和 css-loader,然后再webpack.config.js當(dāng)中配置語法規(guī)則

011.?webpack如何打包less文件

下載less黄鳍、less-loader、css-loader平匈、style-loader框沟，然后配置語法規(guī)則

012.?webpack如何打包圖片文件

下載url-loader、file-loader 增炭，配置語法規(guī)則

013.?webpack打包非vue

①.?npm init 初始項目

②.?安裝webpack及web -cli

③.?配置打包入口（entry）/出口（output）

④.?設(shè)置自動打包

⑤.?下載模塊加載器忍燥，在webpack.config.js配置語法規(guī)則

五、微信小程序

01.?微信小程序當(dāng)中如何獲取用戶信息

wx.getUserInfo?現(xiàn)在版本更新為wx.getUserProfile

02.?微信小程序如何實(shí)現(xiàn)用戶登錄

wx.login

03.?微信小程序當(dāng)中如何獲取當(dāng)前手機(jī)設(shè)備信息隙姿，比如品牌梅垄、操作系統(tǒng)、藍(lán)牙信息等

wx.getSystemInfo

04.?微信小程序如何實(shí)現(xiàn)更新微信版本

wx.updateWeChatApp

05.?微信小程序的頁面跳轉(zhuǎn)有哪些方式

wx.switchTab ?? 只能跳轉(zhuǎn)到tabbar包含的幾個頁面

wx.navigateTo ? 跳轉(zhuǎn)到不在tabbar里包含的其它頁面

wx.navigateBack? 關(guān)閉當(dāng)前頁面输玷，返回到上一級

wx.redirectTo ? 重定向队丝，關(guān)閉當(dāng)前面，不能跳轉(zhuǎn)到tabbar里面包含的頁面

wx.reLaunch ? 關(guān)閉所有頁面欲鹏，打開到應(yīng)用內(nèi)的某個頁面

06.?微信如果實(shí)現(xiàn)下拉刷新

1.在頁面json或者app.json當(dāng)中配置 enablePullDownRefresh:true

然后在需要監(jiān)聽刷新的頁面的js當(dāng)中机久，會自動觸發(fā)函數(shù)onPullDownRefresh

2.可以通過微信API-- wx.startPullDownRefresh和wx.stopPullDownRefresh來實(shí)現(xiàn)

開啟和關(guān)閉刷新

07.?如何讓頁面滾動到指定位置

wx.pageScrollTo

08.?微信怎么進(jìn)行數(shù)據(jù)請求，下載和上傳

數(shù)據(jù)請求：wx.request

上傳:wx.uploadFile

下載:wx.downloadFile

09.?微信小程序怎么在頁面中共享數(shù)據(jù)

1.?將數(shù)據(jù)存放在app.js當(dāng)中的globalData中

2.?使用wx.setStorage存儲在本地

010.?微信小程序如何獲取自己的地理位置信息

wx.getLocation 可以獲取當(dāng)前的地理位置赔嚎、速度等信息

011.?微信小程序的生命周期函數(shù)有哪些

1.?onLoad() 頁面加載的時候觸發(fā)膘盖，只調(diào)用一次

2.?onShow() 頁面顯示/回到前臺的時候調(diào)用 多次調(diào)用

3.?onReady() 頁面初次渲染完畢的時候調(diào)用，只調(diào)用一次

4.?onHide() 頁面隱藏/進(jìn)入后臺的時候調(diào)用

5.?onUnload() 頁面卸載的時候觸發(fā)

012.?微信小程序怎么阻止事件冒泡

可以使用catchTap來替換bindTap

bind事件綁定不會阻止冒泡事件尤误，catch事件綁定可以組件阻止冒泡事件

013.?說說你對rpx的理解

不管屏幕實(shí)際像素是多少侠畔，將當(dāng)前屏幕分成750rpx

014.?微信小程序有哪些優(yōu)勢和劣勢

優(yōu)勢:

1.?容易上手，有豐富的組件和強(qiáng)大的API

2.?用戶基礎(chǔ)廣泛

3.?無需下載

4.?開發(fā)成本比app低

劣勢:

1.?限制較多损晤，單個頁面大小不能超過1M软棺，不能打開超過5個層級的頁面

2.?組件樣式單一，如果組件不能滿足需求尤勋，需要自定義組件

3.?依托于微信喘落，無法打包單獨(dú)的安裝包

015.?微信小程序和H5的區(qū)別是什么

1.?運(yùn)行環(huán)境不同德崭，微信小程序在微信中運(yùn)行，h5在瀏覽器

2.?開發(fā)成本不同揖盘，h5需要進(jìn)行各個瀏覽器的兼容

3.?小程序獲取手機(jī)系統(tǒng)權(quán)限非常簡單，h5較為復(fù)雜锌奴，需要依賴于其它的東西兽狭，比如uniApp或者插件

4.?事件綁定、傳值鹿蜀、數(shù)據(jù)請求方式等都不一樣

六箕慧、Git

01.?平時是怎么進(jìn)行團(tuán)隊合作的

1.?首先會確定好需求，UI設(shè)計師根據(jù)需求設(shè)計效果圖,效果圖客戶通過后茴恰，UI設(shè)計師會給前端一份標(biāo)注圖和切圖颠焦，同時前后端根據(jù)需求開發(fā)頁面和進(jìn)行服務(wù)器開發(fā)

2.?服務(wù)器接口是后端給的，會給一份開發(fā)者文檔往枣，里面有各個需求請求接口地址伐庭、請求類型、參數(shù)和返回值等信息

3.?前端組各個成員會使用git進(jìn)行代碼提交分冈，每天上班時會將最新的代碼pull一下圾另，下班前會將代碼push上去

02.?如何解決代碼沖突問題

1.?首先將自己的代碼提交到本地倉庫

2.?然后將最新的代碼從云倉庫拉下來

3.?進(jìn)行代碼合并，如果合并過程當(dāng)中沖突雕沉，手動解決沖突（刪除多余的代碼或者合并兩份代碼）

4.?解決完沖突以后集乔，重新提交到本地，最后上傳到云倉庫就行了

03.?平時使用git版本工具有哪些

習(xí)慣使用命令行提交

工具使用過sourceTree , 以及git自帶的提交工具

04.?git和SVN有什么區(qū)別

1.?平時只用了git

2.?git是分布式的坡椒，svn是集中式的

3.?git倉庫可以克隆在本地扰路，svn只可以存儲在云上

4.?git支持離線提交，svn只能在線提交

05.?git常用的命令有哪些

1.?git status 查看代碼狀態(tài)

2.?git add . 保存代碼到暫存區(qū)

3.?git commit -m ? 保存代碼到持久區(qū)

4.?git pull 將云倉庫的代碼拉下來

5.?git push 上傳代碼到云上

6.?git clone 將云倉庫代碼克隆到本地

7.?git merge XX 合并分支倔叼，合并分支的時候只允許在主枝合并

希望能對你有所幫助汗唱！

需要領(lǐng)取免費(fèi)資料的小伙伴們，添加小助手vx：SOSOXWV??即可免費(fèi)領(lǐng)取資料哦缀雳！