1、對MVVM開發模式的理解
MVVM分為Model、View、ViewModel三者。
- Model 代表數據模型，數據和業務邏輯都在Model層中定義；
- View 代表UI視圖，負責數據的展示；
- ViewModel 負責監聽 Model 中數據的改變并且控制視圖的更新，處理用戶交互操作；
Model 和 View 并無直接關聯，而是通過 ViewModel 來進行聯系的，Model 和 ViewModel 之間有著雙向數據綁定的聯系。
這種模式實現了 Model 和 View 的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作 dom。
2、vue有哪些常見的指令？
- v-html
- v-show
- v-if
- v-on
- v-for
- 等等
3、v-if和v-show有什么區別？
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；
而v-if會控制這個 DOM 節點的存在與否。當只需要一次顯示或隱藏時，使用v-if更加合理。
4、簡述vue的響應式原理
當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter并且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。
每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。
5、vue中如何在組件間進行通信？
父組件通過 props 傳值給子組件，子組件通過 $emit 來通知父組件修改相應的props值
在父組件中做了兩件事，一是給子組件傳入props，二是監聽input事件并同步自己的value屬性。v-model 實際上會幫我們完成上面的兩步操作。
6、vue如何監控某個屬性值的變化？
Vue中監控對象屬性的變化你可以這樣：
watch: {
obj: {
handler (newValue, oldValue) {
console.log('obj changed')
},
deep: true // deep屬性表示深層遍歷
}
}
// 監控data中，obj.a 的變化
watch: {
'obj.a': {
handler (newName, oldName) {
console.log('obj.a changed')
}
}
}
也可以通過computed 來實現：
// 利用計算屬性的特性來實現
// 當依賴改變時，便會重新計算一個新值
computed: {
a1 () {
return this.obj.a
}
}
7、vue中給data中的對象屬性添加一個新的屬性時會發生什么，如何解決？
會發生屬性添加成功，但是視圖并未刷新的現象
原因：在Vue實例創建時，新添加的變量并未聲明，因此就沒有被Vue轉換為響應式的屬性，自然就不會觸發視圖的更新，這時就需要使用Vue的全局api $set()
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
$set()方法相當于手動的去把新添加的對象處理成一個響應式的屬性，此時視圖也會跟著改變
8、delete和vue.delete刪除數組的區別
- delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
- Vue.delete或者說是this.$delete：直接刪除了數組 改變了數組的鍵值。
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)
this.$delete(b,1)
console.log(b)
// [1, empty, 3, 4]
// [1, 3, 4]
9、如何優化SPA應用的首屏加載速度漫的問題？
- 將公用的JS庫通過script標簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度
- 在配置路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用某個組件時再加載對應的js文件
- 加一個首屏 loading 圖，提升用戶體驗
10、前端如何優化網站性能？
減少 HTTP 請求數量
在瀏覽器與服務器進行通信時，主要是通過 HTTP 進行通信。
瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間。
而且不同瀏覽器對資源文件并發請求數量有限（不同瀏覽器允許的并發數不同），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態
解決方法
- CSS Sprites：國內俗稱 CSS 精靈，這是將多張圖片合并成一張圖片達到減少 HTTP 請求的一種解決方案，可以通過 CSS background 屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。
- 合并 CSS 和 JS 文件：現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。
- 采用 lazyLoad：俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發請求，等到用戶操作真正需要的時候立即加載出內容。
控制資源文件加載優先級
瀏覽器在加載 HTML 內容時，是將 HTML 內容從上至下依次解析，解析到 link 或者 script 標簽就會加載 href 或者 src 對應鏈接內容，為了第一時間展示頁面給用戶，就需要將 CSS 提前加載，不要受 JS 加載影響。
一般情況下都是 CSS 在頭部，JS 在底部。
解決方法：
- 利用瀏覽器緩存
- 減少重排（Reflow）：重排是 DOM 的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的 visibility 屬性，這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁，CPU 使用率就會急劇上升。盡量使用 增加 class 屬性，而不是通過 style 操作樣式
- 圖標使用 IconFont 替換
11、網頁從輸入網址到渲染完成經歷了哪些過程？
- 輸入網址
- 發送到DNS服務器，并獲取域名對應的web服務器對應的ip地址
- 與web服務器建立TCP連接
- 瀏覽器向web服務器發送http請求
- web服務器響應請求，并返回指定url的數據（或錯誤信息，或重定向的新的url地址）
- 瀏覽器下載web服務器返回的數據及解析html源文件
- 生成DOM樹，解析css和js，渲染頁面，直至顯示完成
12、jQuery獲取的dom對象和原生的dom對象有何區別？
js原生獲取的dom是一個對象
jQuery對象就是一個數組對象，其實就是選擇出來的元素的數組集合
原生DOM對象轉jQuery對象：
var box = document.getElementById('box');
var $box = $(box);
jQuery對象轉原生DOM對象
var $box = $('#box');
var box = $box[0];
13、jQuery如何擴展自定義方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
或者
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
使用方式：
$("#div").myMethod();
參考原文： 2019前端面試題匯總（主要為Vue）
