1. 談?wù)勀銓VVM開發(fā)模式的理解
MVVM分為Model、View握玛、ViewModel三者精刷。
Model?代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義灵汪；
View?代表UI視圖檀训，負(fù)責(zé)數(shù)據(jù)的展示；
ViewModel?負(fù)責(zé)監(jiān)聽?Model?中數(shù)據(jù)的改變并且控制視圖的更新享言，處理用戶交互操作峻凫；
Model?和?View?并無直接關(guān)聯(lián)，而是通過?ViewModel?來進(jìn)行聯(lián)系的览露，Model?和?ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系荧琼。因此當(dāng)?Model?中的數(shù)據(jù)改變時(shí)會(huì)觸發(fā)?View?層的刷新，View?中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在?Model?中同步差牛。
這種模式實(shí)現(xiàn)了?Model?和?View?的數(shù)據(jù)自動(dòng)同步命锄，因此開發(fā)者只需要專注對數(shù)據(jù)的維護(hù)操作即可，而不需要自己操作?dom偏化。
2. Vue 有哪些指令脐恩？
v-html、v-show侦讨、v-if驶冒、v-for等等
3. v-if 和 v-show 有什么區(qū)別苟翻？
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換骗污；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否崇猫。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開銷需忿；當(dāng)只需要一次顯示或隱藏時(shí)诅炉，使用v-if更加合理。
4. 簡述Vue的響應(yīng)式原理
當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)屋厘，vue會(huì)遍歷data選項(xiàng)的屬性涕烧，用?Object.defineProperty?將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴，在屬性被訪問和修改時(shí)通知變化擅这。
每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗浩牵鼤?huì)在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)仲翎，會(huì)通知 watcher 重新計(jì)算痹扇，從而致使它關(guān)聯(lián)的組件得以更新。
5. Vue中如何在組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定溯香？
假設(shè)有一個(gè)輸入框組件鲫构，用戶輸入時(shí)，同步父組件頁面中的數(shù)據(jù)
具體思路：父組件通過 props 傳值給子組件玫坛，子組件通過 $emit 來通知父組件修改相應(yīng)的props值结笨，具體實(shí)現(xiàn)如下：
可以看到，當(dāng)輸入數(shù)據(jù)時(shí)湿镀，父子組件中的數(shù)據(jù)是同步改變的：
我們在父組件中做了兩件事炕吸，一是給子組件傳入props，二是監(jiān)聽input事件并同步自己的value屬性勉痴。那么這兩步操作能否再精簡一下呢赫模？答案是可以的，你只需要修改父組件：
6. Vue中如何監(jiān)控某個(gè)屬性值的變化瀑罗？
比如現(xiàn)在需要監(jiān)控data中，obj.a?的變化雏掠。Vue中監(jiān)控對象屬性的變化你可以這樣：
deep屬性表示深層遍歷斩祭，但是這么寫會(huì)監(jiān)控obj的所有屬性變化，并不是我們想要的效果乡话，所以做點(diǎn)修改：
還有一種方法摧玫，可以通過computed 來實(shí)現(xiàn)，只需要：
利用計(jì)算屬性的特性來實(shí)現(xiàn)蚊伞，當(dāng)依賴改變時(shí)席赂，便會(huì)重新計(jì)算一個(gè)新值吮铭。
7. Vue中給data中的對象屬性添加一個(gè)新的屬性時(shí)會(huì)發(fā)生什么时迫，如何解決颅停？
示例：
擊button會(huì)發(fā)現(xiàn)，obj.b 已經(jīng)成功添加掠拳，但是視圖并未刷新：
原因在于在Vue實(shí)例創(chuàng)建時(shí)癞揉，obj.b并未聲明，因此就沒有被Vue轉(zhuǎn)換為響應(yīng)式的屬性溺欧，自然就不會(huì)觸發(fā)視圖的更新喊熟，這時(shí)就需要使用Vue的全局api $set()：
8. delete和Vue.delete刪除數(shù)組的區(qū)別：
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete直接刪除了數(shù)組 改變了數(shù)組的鍵值姐刁。
9.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問題芥牌？
將公用的JS庫通過script標(biāo)簽外部引入，減小app.bundel的大小聂使，讓瀏覽器并行下載資源文件壁拉，提高下載速度；
在配置 路由時(shí)柏靶，頁面和組件使用懶加載的方式引入弃理，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個(gè)組件時(shí)再加載對應(yīng)的js文件屎蜓；
加一個(gè)首屏 loading 圖痘昌，提升用戶體驗(yàn)；
10. 前端如何優(yōu)化網(wǎng)站性能炬转？
1辆苔、減少 HTTP 請求數(shù)量
在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過 HTTP 進(jìn)行通信扼劈。瀏覽器與服務(wù)器需要經(jīng)過三次握手驻啤，每次握手需要花費(fèi)大量時(shí)間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限（不同瀏覽器允許并發(fā)數(shù)）测僵，一旦 HTTP 請求數(shù)量達(dá)到一定數(shù)量街佑，資源請求就存在等待狀態(tài)，這是很致命的捍靠，因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進(jìn)行優(yōu)化沐旨。
CSS Sprites：國內(nèi)俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達(dá)到減少 HTTP 請求的一種解決方案榨婆，可以通過 CSS background 屬性來訪問圖片內(nèi)容磁携。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù)。
合并 CSS 和 JS 文件：現(xiàn)在前端有很多工程化打包工具良风，如：grunt谊迄、gulp闷供、webpack等。為了減少 HTTP 請求數(shù)量统诺，可以通過這些工具再發(fā)布前將多個(gè) CSS 或者 多個(gè) JS 合并成一個(gè)文件歪脏。
采用 lazyLoad：俗稱懶加載，可以控制網(wǎng)頁上的內(nèi)容在一開始無需加載粮呢，不需要發(fā)請求婿失，等到用戶操作真正需要的時(shí)候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁資源一次性請求數(shù)量啄寡。
2豪硅、控制資源文件加載優(yōu)先級
瀏覽器在加載 HTML 內(nèi)容時(shí)，是將 HTML 內(nèi)容從上至下依次解析挺物，解析到 link 或者 script 標(biāo)簽就會(huì)加載 href 或者 src 對應(yīng)鏈接內(nèi)容懒浮，為了第一時(shí)間展示頁面給用戶，就需要將 CSS 提前加載识藤，不要受 JS 加載影響砚著。
一般情況下都是 CSS 在頭部，JS 在底部蹋岩。
????1赖草、利用瀏覽器緩存
瀏覽器緩存是將網(wǎng)絡(luò)資源存儲在本地，等待下次請求該資源時(shí)剪个，如果資源已經(jīng)存在就不需要到服務(wù)器重新請求該資源秧骑，直接在本地讀取該資源。
????2扣囊、減少重排（Reflow）
基本原理：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高）乎折，瀏覽器會(huì)重新計(jì)算元素的幾何屬性，會(huì)使渲染樹中受到影響的部分失效侵歇，瀏覽器會(huì)驗(yàn)證 DOM 樹上的所有其它結(jié)點(diǎn)的 visibility 屬性骂澄，這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁惕虑，CPU 使用率就會(huì)急劇上升坟冲。
3、減少 Reflow溃蔫，如果需要在 DOM 操作時(shí)添加樣式健提，盡量使用 增加 class 屬性，而不是通過 style 操作樣式伟叛。
????1私痹、減少 DOM 操作
????2、圖標(biāo)使用 IconFont 替換
11. 網(wǎng)頁從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過程？
大致可以分為如下7步：
輸入網(wǎng)址紊遵；
發(fā)送到DNS服務(wù)器账千，并獲取域名對應(yīng)的web服務(wù)器對應(yīng)的ip地址；
與web服務(wù)器建立TCP連接暗膜；
瀏覽器向web服務(wù)器發(fā)送http請求匀奏；
web服務(wù)器響應(yīng)請求，并返回指定url的數(shù)據(jù)（或錯(cuò)誤信息桦山，或重定向的新的url地址）攒射；
瀏覽器下載web服務(wù)器返回的數(shù)據(jù)及解析html源文件醋旦；
生成DOM樹恒水，解析css和js，渲染頁面饲齐，直至顯示完成钉凌；
12. jQuery獲取的dom對象和原生的dom對象有何區(qū)別？
js原生獲取的dom是一個(gè)對象捂人，jQuery對象就是一個(gè)數(shù)組對象御雕，其實(shí)就是選擇出來的元素的數(shù)組集合，所以說他們兩者是不同的對象類型不等價(jià)滥搭。
原生DOM對象轉(zhuǎn)jQuery對象：
var????box = document.getElementById('box');
var????$box = $(box);
jQuery對象轉(zhuǎn)原生DOM對象：
var????$box = $('#box');
var????box = $box[0];
13. jQuery如何擴(kuò)展自定義方法
使用：????$("#div").myMethod();
希望大家不僅要追求學(xué)習(xí)的廣度酸纲，更要追求深度。
